概念
- web Storage有两种机制:
- sessionStorage:为每一个给定的源维持一个独立的存储区域,这个存储区域在页面回话期间可用(只要浏览器处于打开状态,包括页面重新加载和恢复)
- localStorage:存储的内容会一直存在,除非我们自己删除
web Storage的用法
Storage.setItem('属性名','属性值')
localStorage.setItem('属性名','属性值')
sessionStorage.setItem('属性名','属性值')
Storage.getItem('属性名')
localStorage.getItem('属性名');
sessionStorage.getItem('属性名');
Storage['属性名']
localStorage['属性名']
sessionStorage['属性名']
Storage.removeItem('属性名')
localStorage.removeItem('属性名')
sessionStorage.removeItem('属性名')
Storage.clear()
localStorage.clear()
sessionStorage.clear()
cookie
- cookie的原生接口不太友好,所以在用cookie的时候我们一般需要自己封装方法
- 不过现在我们在写项目的时候一般会用react或vue等框架,这些框架有自己的npm,react-cookie,vue-cookie
与cookie的区别
- 每一条cookie有大小限制,一般在同源状况下,最多4kb,IE6以下每一个特定域名下最多20个cookie,以上最多有50个。IE和Opera 会清理近期最少使用的cookie,Firefox会随机清理cookie。
- 有时间限制,可以自己设置,到达时间后清除
- 使用360等工具清理垃圾时,可以将cookie清除掉
- 用户可以设置为禁用cookie 5.不算严格的本地存储,获取cookie的时候,需要经过HTTP的处理
- 有大小限制,最多为5MB
- 没有时间限制,会一直存在,除非自己清除
- 只能手动清除
- 不可以禁用
- 是严格的本地存储,获取时不需要经过服务器