1. 程式人生 > >本地儲存常用方式 localStorage, sessionStorage,cookie 的區別 和 伺服器儲存session

本地儲存常用方式 localStorage, sessionStorage,cookie 的區別 和 伺服器儲存session

本地儲存:把一些資訊儲存到客戶端本地(主要目的有很多,其中有一個就是實現多頁面之間的資訊共享)       1. 離線快取(xxx.manifest)  H5處理離線快取還是存在一些硬傷的,所以真實專案中一般還是傳統的NATIVE APP來完成這件事情     2. localStorage / sessionStorage:H5中新增加的API,基於這個API可以把一些資料快取到客戶端本地 (常用)     3. IndexedDB / webSQL :本地資料庫儲存     4. Cookie:本地資訊儲存(常用)     5. CacheStorage / ApplicationCache:本地快取儲存

 

  用到本地儲存的地方:    [頁面之間資訊的通訊]        A儲存資訊,B頁面中可以獲取        1. 登入        2. 記住使用者名稱密碼(或者自動登入)        3. 購物車        4. 跳轉到其它頁面,返回上級頁面的時候停留在之前最後一次   我們來看看本地儲存cookie和服務端session的具體做法及使用場景

 

 

 

[做一些效能優化]        把一些不經常改變的資料,在第一次從伺服器端獲取到之後,儲存到客戶端本地(記錄一個儲存時間),假設我們設定有效儲存期是10分鐘,那麼10分鐘以內,我們再重新整理頁面,就不用再向伺服器傳送請求了,直接從本地資料中獲取展示即可;超過10分鐘,從新向伺服器傳送請求,請求回來最新資料參考第一次,也一樣儲存到本地中...        1. 可減輕伺服器壓力        2. 對於不經常更新的資料我們可以把儲存週期設定的長一些,有助於頁面第二次載入的時候,渲染的速度(移動端經常做這些事情)   localStorage VS cookie       [cookie]          1.相容所有的瀏覽器          2.有儲存的大小限制,一般一個源(一個域下)只能儲存4KB內容          3.cookie有過期時間(當然我們自己可以手動設定這個時間)          4.防毒軟體或者瀏覽器的垃圾清理都可能會把cookie資訊強制清除掉          5.在隱私或者無痕瀏覽模式下,是不記錄cookie的          6.cookie不是嚴格的本地儲存,因為要和伺服器之間來回傳輸
      [localStorage]          1.不相容IE8及以下          2.也有儲存的大小限制,一個源下最多隻能儲存5MB左右          3.本地永久儲存,只要你不手動刪除,永遠儲存在本地(但是我們可以基於API  removeItem/clear手動清除一些自己想要刪除的資訊)          4.防毒軟體或者瀏覽器的垃圾清理暫時不會清除localStorage(新版本谷歌瀏覽器會清除localStorage等資訊)          5.在隱私或者無痕瀏覽模式下,是記錄localStorage的          6.localStorage和伺服器沒有半毛錢關係          真實專案中使用本地儲存來完成一些需求的情況不是很多,一般都是基於伺服器的session或者資料庫儲存完成的(伺服器的session和本地的cookie是有關聯的),如果不考慮相容,就想基於本地儲存來完成一些事情,那麼一般都是用localStorage的(尤其是移動端開發)
      localStorage.setItem([key],[value]):[value]必須是字串格式的(即使寫的不是字串,也會預設轉換為字串)       localStorage.getItem([key]):通過屬性名獲取儲存的資訊       localStorage.removeItem([key]):刪除指定的儲存資訊       localStorage.clear():清除當前域下儲存的所有資訊       localStorage.key(0):基於索引獲取指定的KEY名
      document.cookie='';//=>設定cookie