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. 是严格的本地存储，获取时不须要通过服务器