在最近的新项目中,用的是vue+Element的经典组合,Element自带的存储用的是轻量级的js cookie插件:js-cookie。在浏览器中F12检查元素,之后点击Application,即可看到Local Storage、Session Storage、Cookie,可以看出,前二者的存储是由key和value(键值对)组成,而Cookie则包含名称、值、到期时间、所属域名、生效的路径组成。然而,cookie本身并不适合用于数据存储,于是就将存储改为使用Local storage,下面将就其区别与用法谈谈cookie与storage(即Web Storage,又分为Local Storage 与Session Storage)。

    当你浏览网页时,服务器会先在浏览器中保存的一小段文本信息,当你再次浏览这个网站时,确认为你的账号后,cookie会帮你推荐出特定的内容。cookie可以保存登陆,购物车等需要记录的信息;保存用户的偏好,比如网页的字体大小、背景色等等;记录和分析用户行为。cookie的使用可以让我们觉得那些网站或app更亲切,更人性化,如同“小甜点”一般。然而cookie并不适合客户端存储,它的容量很小(4KB),缺乏数据操作接口,而且会影响性能。与之相比,Storage有大很多的存储空间,并且可以节约带宽。

常见属性和方法:

1.storage.setItem()用于存入数据,主要接收键名key和键值value两个参数

window.sessionStorage.setItem('key', 'value'); 
window.localStorage.setItem('key', 'value');

2.storage.getItem()用于读取数据,接收键名一个参数

window.sessionStorage.getItem('key')
window.localStorage.getItem('key')

3.storage.removeItem()用于清除某个键名对应的键值

sessionStorage.removeItem('key');
localStorage.removeItem('key');

4.storage.clear()用于清除所有保存的数据

5.storage只有storage.length一个属性,用于返回保存的数据项个数,有时也会用到。

    由上面可知,local Storage和session Storage用法基本一致,二者不同点在于数据存储时限不同,local Storage可永久保存,session Stoage则在session(对话)结束后就会删除。另外值得注意的是storage存储的是字符串,如果将JSON存入,与读取,需要用到:

1.  JSON.stringify(data) 将对象转换成JSON格式的数据串。

2.  JSON.parse(data)将数据解析成对象并返回解析后的对象。

 

 

Logo

前往低代码交流专区

更多推荐