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. 是嚴格的本地存儲，獲取時不須要通過服務器