今天主要來講下前端的數據存儲，說起數據存儲，大家肯定第一時間想起cookie，localstorage，sessionstorage，而其實還有userData和IndexedDB這兩種數據存儲，接下來將對它們進行一個比較詳細的總結

一、為什么要進行數據存儲

隨著Web應用程序的出現，慢慢的也開始產生了對于能夠直接在客戶端上存儲用戶信息能力的要求，我們知道當我們訪問某個頁面的時候，很多東西都需要從服務器端進行加載，如果這個時候能將一些東西存儲在客戶端的話，是不是就可以直接拿來用啦，方便快捷，速度又快，又可以節省了很多不必要的請求，為什么不用呢？

其實在我實習的時候，曾經做過一個功能，當某條廣告更新的時候右上角出現小紅點，用戶點擊過后就不出現小紅點，直到廣告更新的時候小紅點再出現，這個功能當時我就用到了客戶端數據存儲來實現啦，其實像一些登錄信息，偏好設定都可以存儲在客戶端，而首先進行客戶端存儲的方案就是cookie，而今天，cookie只是在客戶端存儲數據的其中一種方式，接下來，我們將介紹各種客戶端的數據存儲方式

二、cookie

1、cookie的作用　　

說到cookie，其實cookie有兩個主要功能，第一個功能就是用于解決http無狀態的缺點，在客戶端存儲會話信息，記錄用戶的狀態，而第二個功能也就是我們現在也經常使用cookie在客戶端存儲一些其它的數據

2、cookie的構成

一般來說，cookie是由瀏覽器保存的以下幾塊信息構成的

(1)名稱：一個唯一確定cookie的名稱

(2)值：存儲在cookie中的字符串值，值必須被URL編碼

(3)域：cookie對于哪個域是有效的，所有向該域發送的請求都會包含這個cookie信息

(4)路徑：對于指定域中的路徑，應該向服務器發送cookie

(5)失效時間：表示cookie何時應該被刪除的時間戳

(6)安全標志：指定后，cookie只有在使用SSL連接的時候才發送到服務器

3、如何使用cookie存儲數據

一般來說，有兩種方式可以生成cookie，一種是服務器發送http響應時指定Set-Cookie進行指定，另一種我們可以使用js生成cookie

由于cookie需要通過URL編碼，因此在寫入cookie時和讀取cookie時我們都需要進行編碼和解碼操作，為了方便，我們可以自己寫一個cookie的操作對象

var CookieUtil = { get: function(name) { var cookieName = encodeURIComponent(name) + "=

總結

以上是生活随笔為你收集整理的js cookie 存储checkbox_浏览器数据存储方式总结，网友：“精辟”！的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。