localStorage 即本地存儲(chǔ)，可用于長(zhǎng)久保存整個(gè)網(wǎng)站的數(shù)據(jù)，保存的數(shù)據(jù)沒(méi)有過(guò)期時(shí)間，直到手動(dòng)去除。
在JavaScript語(yǔ)言中可通過(guò) window.localStorage 或 localStorage 調(diào)用此對(duì)象。
特點(diǎn)
1) 同源策略限制。若想在不同頁(yè)面之間對(duì)同一個(gè)localStorage進(jìn)行操作，這些頁(yè)面必須在同一協(xié)議、同一主機(jī)名和同一端口下。(IE8和9存儲(chǔ)數(shù)據(jù)僅基于同一主機(jī)名，忽略協(xié)議（HTTP和HTTPS）和端口號(hào)的要求)
2) 只在本地存儲(chǔ)。localStorage的數(shù)據(jù)不會(huì)跟隨HTTP請(qǐng)求一起發(fā)送到服務(wù)器，只會(huì)在本地生效。
3) 永久保存。保存的數(shù)據(jù)沒(méi)有過(guò)期時(shí)間，直到手動(dòng)去除。
4) 存儲(chǔ)方式。localStorage的存儲(chǔ)方式采用key、value的方式。value的值必須為字符串類型(傳入非字符串，也會(huì)在存儲(chǔ)時(shí)轉(zhuǎn)換為字符串。true值會(huì)轉(zhuǎn)換為"true")。
5) 存儲(chǔ)上限限制：不同的瀏覽器存儲(chǔ)的上限也不一樣，但大多數(shù)瀏覽器把上限限制在5MB以下。
6) 同瀏覽器共享。localStorage的數(shù)據(jù)可以在同一個(gè)瀏覽器的不同標(biāo)簽頁(yè)的同源頁(yè)面之間共享。
瀏覽器最小版本支持
支持localStorage瀏覽器的最小版本：IE8、Chrome 5。
適用場(chǎng)景
localStorage 比較適用2個(gè)地方：
1) 數(shù)據(jù)比較大的臨時(shí)保存方案。如在線編輯文章時(shí)的自動(dòng)保存。
2) 多頁(yè)面訪問(wèn)共同數(shù)據(jù)。sessionStorage只適用于同一個(gè)標(biāo)簽頁(yè)，localStorage相比而言可以在多個(gè)標(biāo)簽頁(yè)中共享數(shù)據(jù)。
屬性
readonly int localStorage.length ：返回一個(gè)整數(shù)，表示存儲(chǔ)在 localStorage 對(duì)象中的數(shù)據(jù)項(xiàng)(鍵值對(duì))數(shù)量。
方法
string localStorage.key(int index) ：返回當(dāng)前 localStorage 對(duì)象的第index序號(hào)的key名稱。若沒(méi)有返回null。
string localStorage.getItem(string key) ：返回鍵名(key)對(duì)應(yīng)的值(value)。若沒(méi)有返回null。
void localStorage.setItem(string key, string value) ：該方法接受一個(gè)鍵名(key)和值(value)作為參數(shù)，將鍵值對(duì)添加到存儲(chǔ)中；如果鍵名存在，則更新其對(duì)應(yīng)的值。
void localStorage.removeItem(string key) ：將指定的鍵名(key)從 localStorage 對(duì)象中移除。
void localStorage.clear() ：清除 localStorage 對(duì)象所有的項(xiàng)。
事件
storage ：當(dāng)對(duì) localStorage 進(jìn)行更改時(shí)，觸發(fā)此事件。
在IE 11和Chrome中對(duì)此事件有不同的觸發(fā)機(jī)制：
1) 當(dāng)前頁(yè)面是否觸發(fā)：當(dāng)前頁(yè)面進(jìn)行l(wèi)ocalStorage 操作時(shí)，IE 11是當(dāng)前頁(yè)面也觸發(fā)此事件，Chrome 是當(dāng)前頁(yè)面不觸發(fā)此事件。
2) 對(duì)localStorage進(jìn)行重復(fù)操作：如存入重復(fù)的數(shù)據(jù)，IE 11是觸發(fā)此事件，Chrome 是不觸發(fā)此事件。
存儲(chǔ)數(shù)據(jù)
采用setItem()方法存儲(chǔ)
localStorage.setItem('testKey','這是一個(gè)測(cè)試的value值'); // 存入一個(gè)值
通過(guò)屬性方式存儲(chǔ)
localStorage['testKey'] = '這是一個(gè)測(cè)試的value值';
獲取數(shù)據(jù)
通過(guò)getItem()方法取值
localStorage.getItem('testKey'); // => 返回testKey對(duì)應(yīng)的值
通過(guò)屬性方式取值
localStorage['testKey']; // => 這是一個(gè)測(cè)試的value值
存儲(chǔ)Json對(duì)象
localStorage 也可存儲(chǔ)Json對(duì)象：存儲(chǔ)時(shí)，通過(guò)JSON.stringify()將對(duì)象轉(zhuǎn)換為文本格式；讀取時(shí)，通過(guò)JSON.parse()將文本轉(zhuǎn)換回對(duì)象。
var userEntity = {
name: 'tom',
age: 22
};
// 存儲(chǔ)值：將對(duì)象轉(zhuǎn)換為Json字符串
localStorage.setItem('user', JSON.stringify(userEntity));
// 取值時(shí)：把獲取到的Json字符串轉(zhuǎn)換回對(duì)象
var userJsonStr = localStorage .getItem('user');
userEntity = JSON.parse(userJsonStr);
console.log(userEntity.name); // => tom
