WebStorage和cookies

概念

• 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

1. 每一条cookie有大小限制，一般在同源状况下，最多4kb，IE6以下每一个特定域名下最多20个cookie，以上最多有50个。IE和Opera 会清理近期最少使用的cookie，Firefox会随机清理cookie。
2. 有时间限制，可以自己设置，到达时间后清除
3. 使用360等工具清理垃圾时，可以将cookie清除掉
4. 用户可以设置为禁用cookie 5.不算严格的本地存储，获取cookie的时候，需要经过HTTP的处理

• localStorage

1. 有大小限制，最多为5MB
2. 没有时间限制，会一直存在，除非自己清除
3. 只能手动清除
4. 不可以禁用
5. 是严格的本地存储，获取时不需要经过服务器