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

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

ChromeFirefoxInternet ExplorerOperaSafari
5+2+8+10.5+4+

以上信息来源于 MDN 文档。

使用方法

sessionStorage.setItem(key, value) 方法

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

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

sessionStorage.getItem(key) 方法

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

//  读取数据
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。


版权声明:本文为原创文章,版权归 Mr. Ma's Blog 所有,转载请联系博主获得授权!
本文地址:https://www.misterma.com/archives/600/
如果您对本文有什么问题或疑问都可以在评论区留言,我看到后会尽量解答。

发表评论

正在加载 Emoji
×