javascript中sessionStorage 、localStorage 和 Cookie

javascript中sessionStorage 、localStorage 和 Cookie

欢迎访问我的博客,祝码农同胞们早日走上人生巅峰,迎娶白富美~~~

参考文章:JS 详解 Cookie、 LocalStorage 与 SessionStorage

下面是个人总结内容:

相同点

用于浏览器端存储的缓存数据

不同点

特性 Cookie localStorage sessionStorage
数据的生命期 可设置的失效时间,到达时间自动过期 除非被清除,否则永久保存 仅用于当前会话,浏览器关闭,立即被清除
存放数据大小 4K左右 一般为5MB 一般为5MB
与服务器端通信 携带在HTTP头中,数据会发送到服务器端,可能造成宽带浪费 只在客户端,不参与和服务端的通信 只在客户端,不参与和服务端的通信
易用性 需程序员自己封装,源生的Cookie接口不友好 源生接口可以接受,亦可再次封装来对Object和Array有更好的支持 源生接口可以接受,亦可再次封装来对Object和Array有更好的支持

应用场景

Cookie:

1. 最好精简,因为本身存放数据大小很小
2. 常用于判断用户登录,对于登录过的用户,浏览器会插入一个唯一的标识,当下次用户需要登录,只要读取到这个值,就能判断当前用户是否登录了

localStorage:

1. 购物车管理工作,一些产生的本地数据用以完成数据持久化

sessionStorage:

  1. 多页面表单,按步骤引导用户填写

安全性

  1. Cookie、localStorage 和 sessionStorage三者,只要打开控制台,都能看到这三者存放的数据的,并且能够随意修改,所以会产生风险
  2. sessionStorage使用了session加密,这样用户看到的数据都是经过加密处理过的,会难以获取正确的标识
  3. 但是对于localStorage或者Cookie的数据,就可以被肆意妄为的修改或者伪造了
  4. 上面是我个人的一些理解,文章中还提到了XSS注入的风险,关于XSS注入为此我专门查了些文档,推荐一篇自我感觉写的相当详细的Web安全测试之XSS
  1. 前者存储空间更大
  2. 前者存储内容不会发送到服务器,防止造成宽带浪费
  3. 接口丰富
  4. 独立的存储空间:每个域(包括子域)有独立的存储空间,各个存储空间是完全独立的,避免造成数据混乱
  5. 每个特定的域名下最多生成20个cookie
  6. sessionStorage用于本地存储一个会话存储,关闭会话,随之销毁
  7. localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的
  8. Cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在 ,而Web Storage仅仅是为了在本地存储数据而生

一些基本操作

localStoragesessionStorage都具有相同的操作方法,例如setItemgetItemremoveItem

setItem存储value

用于存储对象格式的数据

1
2
sessionStorage.setItem("key", "value");     
localStorage.setItem("site", "qqqww");

getItem获取value

获取指定关键字段key本地存储的值

1
2
var value = sessionStorage.getItem("key");     
var site = localStorage.getItem("site");

removeItem删除key

删除指定关键字段key本地存储的值

1
2
sessionStorage.removeItem("key");     
localStorage.removeItem("site");

clear清除所有的key/value

清除所有本地的key/value

1
2
sessionStorage.clear();     
localStorage.clear();

其他操作方法:点操作和[ ]

web Storage不但可以用自身的setItem`,getItem`等方便存取,也可以像普通对象一样用点(.)操作符,及[]的方式进行数据存储

1
2
3
4
5
var storage = window.localStorage
storage.key1 = "hello"
storage["key2"] = "world"
console.log(storage.key1)
console.log(storage["key2"])

遍历

localStorage和sessionStorage的key和length属性实现遍历

sessionStoragelocalStorage提供的key()length可以方便的实现存储的数据遍历

1
2
3
4
5
6
var storage = window.localStorage;
for(var i=0, len=storage.length; i<len;i++){
var key = storage.key(i);
var value = storage.getItem(key);
console.log(key + "=" + value);
}

本文标题:javascript中sessionStorage 、localStorage 和 Cookie

文章作者:王工头

发布时间:2019年01月21日 - 17:53:43

最后更新:2019年01月25日 - 12:31:01

原始链接:https://qqqww.com/javascript中sessionStorage-、localStorage-和-cookie/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

-------------本文结束感谢大佬们的阅读-------------