FENote— client端 webStorage

Chien Wei Luo
Aug 28, 2017 · 5 min read
附上台南某景點但我忘了在哪

一直對於網站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/local
storage改变的时候,触发这个事件会调用所有同域下其他窗口的storage事件,不过它本身触发storage的当前窗口是不会触发这个事件的(当然ie这个特例除外,它包含自己本身也会触发storage事件)sessionStorage的作用域是限制在顶层窗口的,因此对sessionStorage的改变只有当有相牵连的窗口的时候才会触发存储事件

註: 調適方面, 可以用chrome dev tools的application左欄有storage 可以看相應的key/value


webStorage 功能就是在web上儲存數據!

先說優點吧

  1. 減少網路流量 ->避免向server做多餘請求
  2. 快速顯示數據 -> 性能好, 本地數據可以即時獲得
  3. 臨時儲存, 快速丟棄 -> sessionStorage
  4. 分擔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有幾個缺點

  1. 在每個http request送出時都會被送到server端(包在header中), 不管有沒有用到裡頭的資訊
  2. 資料本身沒有加密(除非另外使用SSL)[其實一般存儲都沒有]
  3. 使用cookie保存過多數據會帶來性能問題
  4. cookies 就是4KB
  5. 原生cookie接口不太好用

三者共通點: 都是保存於client端, 且同源

而再大至client端(小/較不安全)的數據儲存, 與server端(大/安全)的數據儲存, 用途都不同

端看情況而使用了

但我想這些新機制不是要用來取代什麼的, 而是互相搭配做出更完美的實現


Using -

sessionStorage : 生命週期短, 有效範圍窄, 無法跨分頁, 例如可能購物網站想要用另一個分頁計算運費, 但想用原分頁做最後購買

localStorage: 需要跨分頁, 視窗甚至瀏覽器關掉重開的場合

cookie: 會與server端交互的信息, 例如記住密碼


Security -

不管使用什麼儲存數據都要注意是否有XSS攻擊注入,

但瀏覽器可以通過HttpOnly來保護Cookie不被XSS攻擊獲取到資料

localStorage則沒有對XSS有任何防禦機制, 一但出現XSS漏洞, 那麼存儲其中的數據就會被獲取到

ref:

)
Chien Wei Luo

Written by

94 a lazy guy

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade