当前位置: 首页>前端>正文

sessionstorage置空 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

Web Storage AND Cookie

  1. 前者存储空间更大
  2. 前者存储内容不会发送到服务器,防止造成宽带浪费
  3. 接口丰富
  4. 独立的存储空间:每个域(包括子域)有独立的存储空间,各个存储空间是完全独立的,避免造成数据混乱
  5. 每个特定的域名下最多生成20个cookie
  6. sessionStorage用于本地存储一个会话存储,关闭会话,随之销毁
  7. localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的
  8. Cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在 ,而Web Storage仅仅是为了在本地存储数据而生

一些基本操作

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

setItem存储value

用于存储对象格式的数据



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

getItem获取value

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



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

removeItem删除key

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



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

clear清除所有的key/value

清除所有本地的key/value



sessionStorage.clear();     
localStorage.clear();

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

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



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可以方便的实现存储的数据遍历



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); 
}

https://www.xamrdz.com/web/2wu1924027.html

相关文章: