JS儲存相關

cookie 是小甜餅的意思。顧名思義，cookie 確實非常小，它的大小限制為4kb左右，是網景公司的前雇員 lou montulli 在2023年3月的發明。它的主要用途有儲存登入資訊，比如你登入某個**市場可以看到「記住密碼」，這通常就是通過在 cookie 中存入一段辨別使用者身份的資料來實現的。

localstorage 是 html5 標準中新加入的技術，它並不是什麼劃時代的新東西。早在 ie 6 時代，就有乙個叫 userdata 的東西用於本地儲存，而當時考慮到瀏覽器相容性，更通用的方案是使用 flash。而如今，localstorage 被大多數瀏覽器所支援，如果你的**需要支援 ie6+，那以 userdata 作為你的 polyfill 的方案是種不錯的選擇。

特性chrome

firefox (gecko)

internet explorer

opera

safari (webkit)

localstorage

43.5

810.50

4sessionstorage52

810.50

4三者的異同

特性cookie

localstorage

sessionstorage

資料的生命期

可設定失效時間，預設是關閉瀏覽器後失效

除非被清除，否則永久儲存

僅在當前會話下有效，關閉頁面或瀏覽器後被清除

存放資料大小

4k左右

一般為5mb

與伺服器端通訊

每次都會攜帶在http頭中，如果使用cookie儲存過多資料會帶來效能問題

僅在客戶端（即瀏覽器）中儲存，不參與和伺服器的通訊

易用性需要程式設計師自己封裝，源生的cookie介面不友好

源生介面可以接受，亦可再次封裝來對object和array有更好的支援

有了對上面這些差別的直觀理解，我們就可以討論三者的應用場景了。

因為考慮到每個 http 請求都會帶著 cookie 的資訊，所以 cookie 當然是能精簡就精簡啦，比較常用的乙個應用場景就是判斷使用者是否登入。針對登入過的使用者，伺服器端會在他登入時往 cookie 中插入一段加密過的唯一辨識單一使用者的辨識碼，下次只要讀取這個值就可以判斷當前使用者是否登入啦。曾經還使用 cookie 來儲存使用者在電商**的購物車資訊，如今有了 localstorage，似乎在這個方面也可以給 cookie 放個假了~

而另一方面 localstorage 接替了 cookie 管理購物車的工作，同時也能勝任其他一些工作。比如html5遊戲通常會產生一些本地資料，localstorage 也是非常適用的。如果遇到一些內容特別多的表單，為了優化使用者體驗，我們可能要把表單頁面拆分成多個子頁面，然後按步驟引導使用者填寫。這時候 sessionstorage 的作用就發揮出來了。

需要注意的是，不是什麼資料都適合放在 cookie、localstorage 和 sessionstorage 中的。使用它們的時候，需要時刻注意是否有**存在 xss 注入的風險。因為只要開啟控制台，你就隨意修改它們的值，也就是說如果你的**中有 xss 的風險，它們就能對你的 localstorage 肆意妄為。所以千萬不要用它們儲存你系統中的敏感資料。

雖然我們儲存的是陣列，但是，實際上儲存的的是陣列字元化後的字串(cookie和localstorage都是)

資料儲存

我們每次點選乙個標題欄，都要把它的顯示狀態記錄。例如，放在乙個陣列中，然後儲存之，**如下（假設我們已經記錄了各標題欄狀態為陣列arrdisplay）：

var arrdisplay = [0, 1, 1, 1];
//儲存，ie6~7 cookie 其他瀏覽器html5本地儲存
if (window.localstorage) else

資料讀取

當我們每次load頁面的時候，就要將相對應的資料讀出來。如下：

var strstoredate = window.localstorage? localstorage.getitem("menutitle"): cookie.read("menutitle");

需要注意的是：雖然我們儲存的是陣列，但是，實際上儲存的的是陣列字元化後的字串(cookie和localstorage都是)，因此，我們在處理strstoredate的時候，一定要當作字串處理，類似下面：

strstoredate.split(",").each(function(display, index) );

JS儲存相關

Hbase儲存相關

js 事件相關

JS陣列相關

JS儲存相關

Hbase儲存相關

js 事件相關

JS陣列相關

相關推薦