一、sessionstorage
二、localstorage
三、cookies
四、總結
在前端開發中，往往會將有些不經常更改的資料快取到本地，比如使用者資訊。前端本地快取的方式有多種，比如 sessionstorage、localstorage 以及 cookies 等。那麼這個幾個快取有什麼區別，各自又有什麼特點呢？將是本文分享的重點。
用法sessionstorage.setitem：儲存資料，接收2個引數，乙個是 key，乙個是 value。
sessionstorage.getitem：獲取資料，接收1個引數，引數為 key，可獲取 value。
sessionstorage.removeitem：移除指定資料，接收1個引數，引數為 key，移除相應的 value。
sessionstorage.clear：移除所有資料，無引數。
sessionstorage.key：獲取指定下標的資料，接收1個引數，引數為 下標值。
sessionstorage.length：屬性，獲取快取總數。
獲取基本型別（字串、數值等）
//儲存快取資料
sessionstorage.
setitem
("name"
,"jack");
sessionstorage.
setitem
("age",18
);//獲取快取資料
var name = sessionstorage.
getitem
("name");
var age = sessionstorage.
getitem
("age");
console.
log(name)
//"jack"
console.
log(age)
//18
//獲取指定下標的快取資料
sessionstorage.
key(0)
;//"jack"。獲取第乙個快取值
//獲取快取總數
sessionstorage.length;
//2 ,一共有 2 個快取
//移除指定快取
sessionstorage.
removeitem
("name");
//移除name快取
//移除所有快取
sessionstorage.
clear()
;移除所有快取
// 獲取引用型別（物件，陣列等）
//儲存快取資料
sessionstorage.
setitem
("data"
,json
.stringify()
);sessionstorage.
setitem
("arr"
,json
.stringify([
1,2]
);//獲取快取資料
var data=
json
.parse
(sessionstorage.
getitem
("data"))
;var arr=
json
.parse
(sessionstorage.
getitem
("arr"))
; console.
log(data)
//; console.
log(arr)
//[1,2];
特點（1）特性：html5新特性；
（2）儲存位置：會話關閉，也就是瀏覽器關閉時，sessionstorage 快取會消失，儲存在記憶體；
（3）儲存容量：儲存容量 5mb 左右；
（4）儲存方式：存在客戶端，不用傳到伺服器，節省網路資源；
（5）共享：相同瀏覽器，相同網域名稱和埠情況下不同頁面可共享 sessionstorage 。
用法localstorage.setitem：儲存資料，接收2個引數，乙個是 key，乙個是 value。
localstorage.getitem：獲取資料，接收1個引數，引數為 key，可獲取 value。
localstorage.removeitem：移除指定資料，接收1個引數，引數為 key，移除相應的 value。
localstorage.clear：移除所有資料，無引數。
localstorage.key：獲取指定下標的資料，接收1個引數，引數為 下標值。
localstorage.length：屬性，獲取快取總數。
獲取基本型別（字串、數值等）
//儲存快取資料
localstorage.
setitem
("name"
,"jack");
localstorage.
setitem
("age",18
);//獲取快取資料
var name = localstorage.
getitem
("name");
var age = localstorage.
getitem
("age");
console.
log(name)
//"jack"
console.
log(age)
//18
//獲取指定下標的快取資料
localstorage.
key(0)
;//"jack"。獲取第乙個快取值
//獲取快取總數
localstorage.length;
//2 ,一共有 2 個快取
//移除指定快取
localstorage.
removeitem
("name");
//移除name快取
//移除所有快取
localstorage.
clear()
;移除所有快取
//儲存快取資料
localstorage.
setitem
("data"
,json
.stringify()
);localstorage.
setitem
("arr"
,json
.stringify([
1,2]
);//獲取快取資料
var data=
json
.parse
(localstorage.
getitem
("data"))
;var arr=
json
.parse
(localstorage.
getitem
("arr"))
; console.
log(data)
//; console.
log(arr)
//[1,2];
//移除快取資料
localstorage.
removeitem
("name");
localstorage.
removeitem
("age"
);
特點（1）特性：html5新特性；
（2）儲存位置：localstorage 的儲存與會話無關，會永久的保持在本地，除非自動清除，資料存在硬碟。
（3）儲存大小：儲存容量 5mb 左右；
（4）儲存方式：存在客戶端，不用傳到伺服器，節省網路資源；
（5）共享：相同瀏覽器，相同網域名稱和埠情況下不同頁面可共享 localstorage 。
用法
//設定cookie
document.cookie =
"name=jack;"
;//獲取cookie
var name=document.cookie.
split
(";")[
0].split
("=")[
1]; console.
log(name)
;//"jack"
（1）大小和數量有限制，每個 domain 最多只能有 20 條 cookie，每個 cookie 不能超過4kb，否則會被截斷；
（2）每次訪問都要傳送cookie給伺服器，浪費頻寬；
（3）使用者可以操作（禁用）cookie，功能受限；
（4）安全性低，cookie 一旦被劫持，就可以獲取使用者的 session 資訊；
（5）cookie 需要指定作用域，不可以跨域呼叫。
sessionstorage 和 localstorage 儲存物件時，需要通過 json.stringify() 方法和 json.parse() 方法轉換一下，否則強制轉換為字串；
目前為止，firefox3.6 以上、chrome6 以上、safari 5 以上、pera10.50 以上、ie8 以上版本的瀏覽器支援 sessionstorage 與 localstorage 的使用；
sessionstorage 和 localstorage (5mb)比 cookies 容量大(4kb)。
sessionstorage 和 localstorage 不用上傳伺服器，節約頻寬，而 cookies 需要。
sessionstorage 和 localstorage 不能被使用者手動禁用，而 cookies 會。
前端資料儲存
一 cookie儲存 通常直接叫做cookie 最初在客戶端用於儲存會話資訊的 該標準要求伺服器 對任意http請求傳送set cookie http頭作為響應的一部分，其中包含會話資訊。這個http響應設定以name為名稱，以value為值的乙個cookie名稱和值在傳送時都必須是url編碼的。2...
前端儲存 localStorage
發布自在html5中，引入了兩個新的前端儲存特性 這兩者非常相似，都是用來在前端儲存一定量的資料，稱為前端儲存，但是這兩者仍然存在一定區別 儲存大小 儲存位置 儲存內容型別 獲取方式 可見localstorage適合在前端儲存長時間使用的資料，而sessionstorage適合儲存短期使用 一次性的...
localstorage 前端儲存
function win,doc else if typeof argument string else 刪除localstorage param val string null rmitems function val else win.local storage local storage wi...