Web存储——sessionStorage与localStorage

时间：2022-08-26 08:18:39

sessionStorage与localStorage

1. sessionStorage与localStorage的兼容性及其特点

1.1 兼容性

localStorage兼容性
Web存储——sessionStorage与localStorage

看起来不错啊 IE8+ 以及大多数浏览器都支持。那就放心用吧！
具体还是大家自己查一查吧！

1.2 特点

sessionStorage与localStorage特点：

  1. 默认支持的容量为一个站 5M。

  2. 以key-value形式保存数据的，key和value只能是字符串格式。

两者相同之处：
都拥有setItem,getItem,removeItem,clear等方法

两者的区别：
sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。
localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

2. sessionStorage与localStorage的使用方法

2.1 存储操作

//定义一个命名空间
var storage = {};
//将一个对象转化为JSON字符串 存储
storage.setData = function(key,data){
var _str = JSON.stringify(data);
    console.log(_str);

    sessionStorage.setItem(key,_str);
};

2.2 读取操作

//将JSON字符串转化为对象 读取
storage.getData = function(key){
var _data;
    _data = JSON.parse(sessionStorage.getItem(key));
//_data = $.parseJSON(sessionStorage.getItem(key));
//_data = eval(sessionStorage.getItem(key)); //未知错误Uncaught SyntaxError: Unexpected token : 请大牛解答

    console.log(_data);
return _data;
};

2.3 移除操作

storage.removeData = function(key){
sessionStorage.removeItem(key);
console.log('SessionStorage Remove Success.');
};

2.4 补充

localSrorage的操作也是如此
需要注意的是：
sessionStorage 与 localStorage 只能以字符串的形式存储。所以需要将对象进行格式转化 。 这里的知识点有 JSON.stringify() ，JSON.parse()等，如果需要兼容IE的低版本，还要下载json.js 。这块以后会专门理解一下 JSON字符串与JSON对象的转换！

其他的小技巧：

storage.s = window.localStorage;
storage.s.key1 = 'hello';
storage.s['key2'] = 'world';

这样的写法也是OK的。大家可以试一试。

3.总结

Storage存储可以保存用户的一些习惯动作 和 数据存储。个人十分喜爱使用它。真心方便！当然数据存在本地还是有安全性问题的。
标签：

相关文章