FENote— client端 webStorage

一直對於網站client暫存沒什麼概念, 正好現在side project要用到相關的東西
我們都知道加載速度與用戶體驗是絕對的正比關係, 適度的做這方面的調整, 呈現出來的效果肯定是好的
面試時遇到相應的問題也可以說出自己的看法所以
紙上談兵在這裡做個整理
Web Storage API -
先簡單摘要一下Web Storage的api相關
storage的對象是key-value形式儲存的, 像是objects
--Web Storage API--
localStorage.setItem(key,value); //保存數據, 如果key值存在則覆蓋
localStorage.getItem(key,value); //讀取數據, 如果不存在返回null
localStorage.removeItem(key); //刪除單個數據
localStorage.clear(); //刪除所有數據, 使全為null
localStorage.key(index); //得到某個索引的key名
localStorage.length; //返回長度, 數值這些api只能操作string, key/value都要是string但可以利用JSON的stringify()方法將複雜對象轉換為字串將之存入, 讀取時再透過JSON的parse()方法再轉換成JSON對象
也可以通過監聽window對象的storage事件並指定函數
window.addEventListener('storage',function(e){...})e - event: 事件有幾個屬性
1. key 鍵值
2. oldValue 修改前的值
3. newValue 修改後的值
4. url 頁面url
5. storageArea 被修改的storage對象session/localstorage改变的时候,触发这个事件会调用所有同域下其他窗口的storage事件,不过它本身触发storage的当前窗口是不会触发这个事件的(当然ie这个特例除外,它包含自己本身也会触发storage事件)sessionStorage的作用域是限制在顶层窗口的,因此对sessionStorage的改变只有当有相牵连的窗口的时候才会触发存储事件
註: 調適方面, 可以用chrome dev tools的application左欄有storage 可以看相應的key/value
webStorage 功能就是在web上儲存數據!
先說優點吧
- 減少網路流量 ->避免向server做多餘請求
- 快速顯示數據 -> 性能好, 本地數據可以即時獲得
- 臨時儲存, 快速丟棄 -> sessionStorage
- 分擔server端的開銷 -> 94這樣
HTML5 針對client端本地而言的Storage方式分為三種(+cookie)
sessionStorage:
將數據保存在session對象中.(session是指用戶在瀏覽某個網站時, 從進入網站到瀏覽器關閉所經過的這段時間), 理所當然, session結束即清除
localStorage:
將數據保存在client端本地的硬體設備中, 就算瀏覽器被關閉了, 數據依然存在, 下一次打開瀏覽器訪問該網站實仍然可以繼續使用, 原則上要等javascript將內容清空或是使用者將Cache清空LocalStorage才會消失.
兩者在生命週期上有較明顯的差別, 而相同點為:
- 儲存數據大小建議約5MB
- 通過key值保存數據, 存取方便
- 都不參與SERVER的通信, 不影響網站性能
- 原生接口易用度可以接受, 也可以再次封裝來對Object與Array有更好的支持
Cookie:
而cookie一般在server side生成, 可設置失效時間, 如果是在client端生成, 默認是關閉瀏覽器結束生命週期
但在這裡我覺得奇怪? 不是以往cookie就可以實現在client端站存資料的功能了嗎?
對的, 但cookie有幾個缺點
- 在每個http request送出時都會被送到server端(包在header中), 不管有沒有用到裡頭的資訊
- 資料本身沒有加密(除非另外使用SSL)[其實一般存儲都沒有]
- 使用cookie保存過多數據會帶來性能問題
- cookies 就是4KB
- 原生cookie接口不太好用
三者共通點: 都是保存於client端, 且同源
而再大至client端(小/較不安全)的數據儲存, 與server端(大/安全)的數據儲存, 用途都不同
端看情況而使用了
但我想這些新機制不是要用來取代什麼的, 而是互相搭配做出更完美的實現
Using -
sessionStorage : 生命週期短, 有效範圍窄, 無法跨分頁, 例如可能購物網站想要用另一個分頁計算運費, 但想用原分頁做最後購買
localStorage: 需要跨分頁, 視窗甚至瀏覽器關掉重開的場合
cookie: 會與server端交互的信息, 例如記住密碼
Security -
不管使用什麼儲存數據都要注意是否有XSS攻擊注入,
但瀏覽器可以通過HttpOnly來保護Cookie不被XSS攻擊獲取到資料
localStorage則沒有對XSS有任何防禦機制, 一但出現XSS漏洞, 那麼存儲其中的數據就會被獲取到
ref:
[MDN-Using the Web Storage API]
[详说 Cookie, LocalStorage 与 SessionStorage]