sessionStorage 的简单使用

sessionStorage 有点类似于 localStorage，都是用来存储数据的，但是不同的地方就是 localStorage 存储的数据不会过期，而 sessionStorage 存储的数据在关闭浏览器后会被销毁，类似于后端的 session。sessionStorage 在发送 HTTP 请求的时候不会被发送到后端，所以后端是无法操作 sessionStorage 的。

之前我也写过一篇文章： HTML5 LOCALSTORAGE的简单使用 ，今天正好把 sessionStorage 也写了，下面是浏览器对sessionStorage的兼容情况：

以上信息来源于 MDN 文档。

使用方法

sessionStorage.setItem(key, value) 方法

sessionStorage.setItem 方法的功能是保存数据，下面把 qq=12345678 保存到 sessionStorage ：

//  保存数据
sessionStorage.setItem('qq', '12345678');

sessionStorage.getItem(key) 方法

sessionStorage.getItem 用来获取保存在 sessionStorage 的数据，如果未找到会返回 null，下面获取上面保存在 sessionStorage 的 qq：

//  读取数据
let data = sessionStorage.getItem('qq');

sessionStorage.removeItem(key) 方法

sessionStorage.removeItem 用来删除数据，下面删除保存的 qq：

//  删除数据
sessionStorage.removeItem('qq');

sessionStorage.clear() 方法

sessionStorage.clear 方法可以删除当前域名下保存的所有 sessionStorage 数据，下面删除所有数据：

sessionStorage.clear();

sessionStorage.key(index) 方法

sessionStorage.key 根据传入的 index 索引获取对应的键名，例如我存储了 name 和 age 的键值对，我使用：

//  获取key
let data = sessionStorage.key(0);
console.log(data);  //  输出结果未 name

最终会获取 name，也就是第0个的键名。

存储 JSON

sessionStorage 只能存储字符串，如果每一次存储都生成一条新的 sessionStorage 数据也不方便管理，如果要存储 JSON 就需要把 JSON 转换为字符串存储，下面演示存储 JSON：

//  JSON
let user = {
    name: "小李",
    age: 25,
    phoneNumber: "15000000000"
};

//  JSON转字符串
user = JSON.stringify(user);
//  存储
sessionStorage.setItem('user', user);

获取数据也需要把字符串转换为 JSON，下面获取存储在 sessionStorage 的 JSON 字符串：

//  读取数据
let data = sessionStorage.getItem('user');
//  把JSON字符串转换为JSON
data = JSON.parse(data);

localStorage 也可以使用同样的方式来存储 JSON。