如何在session storage中进行数据的设置、获取与存储？附Ajax示例

嘿，结合你给出的Ajax场景，我来一步步说明如何在sessionStorage中操作数据：

1. 存储数据到sessionStorage #

你已经在Ajax的done回调里做了正确的第一步——把对象序列化为字符串存储，因为sessionStorage只能存储字符串类型的数据，而你的obj.DATA是一个嵌套对象，所以必须用JSON.stringify()把它转换成JSON字符串。

完整的Ajax请求代码可以补全成这样：

$.ajax({
  type: 'POST',
  url: 'AjaxFunctions.cfc?method=getCustomers',
  data: formData,
  dataType: 'json'
}).done(function(obj){
  console.log(obj.DATA);
  // 将对象转为字符串后存入sessionStorage，键名为"customersData"
  sessionStorage.setItem("customersData", JSON.stringify(obj.DATA));
}).fail(function(jqXHR, textStatus, errorThrown){
  // 处理请求失败的情况
  console.error('Ajax请求失败:', textStatus, errorThrown);
});

2. 从sessionStorage获取并使用数据 #

要取出存储的对象，需要用JSON.parse()把字符串转回JavaScript对象。之后你就可以像操作普通对象一样使用这些数据了：

// 根据键名取出存储的字符串，再解析为对象
const storedCustomers = JSON.parse(sessionStorage.getItem("customersData"));

// 先检查数据是否存在（避免页面刷新后数据丢失的情况）
if (storedCustomers) {
  // 遍历你的客户数据结构（键是客户ID，值是客户信息对象）
  for (const customerId in storedCustomers) {
    // 确保是对象自身的属性，避免遍历原型链上的内容
    if (storedCustomers.hasOwnProperty(customerId)) {
      const customer = storedCustomers[customerId];
      console.log(`客户ID: ${customerId}`);
      console.log(`全名: ${customer.FIRSTNAME} ${customer.LASTNAME}`);
      console.log(`邮箱: ${customer.EMAIL}`);
    }
  }
} else {
  console.log("sessionStorage中没有保存的客户数据");
}

3. 额外的注意事项 #

• 生命周期：sessionStorage的数据只在当前会话（当前标签页）有效，关闭标签页后数据会被清除；如果需要持久化存储，可以考虑用localStorage（关闭浏览器后仍保留）。
• 存储限制：每个域名下的sessionStorage存储上限大概是5MB，不要存过大的数据。
• 同域限制：sessionStorage遵循同源策略，只有相同协议、域名、端口的页面才能访问同一组sessionStorage数据。
• 删除数据：如果需要删除特定键的数据，可以用sessionStorage.removeItem("customersData")；清空所有数据用sessionStorage.clear()。

内容的提问来源于stack exchange，提问作者espresso_coffee