HTML5之前的使用本地存儲(chǔ)
在html5之前，本地存儲(chǔ)使用的時(shí)cookie,他的使用場(chǎng)景如下：
- 瀏覽器獲取一個(gè)web頁(yè)面，比如從“pets-R-us.com”獲取頁(yè)面，服務(wù)器可以相應(yīng)發(fā)送一個(gè)cookie，Cookie中包一個(gè)或多個(gè)鍵值對(duì)。例如：
Cookie: pet=dog; age=5; color=black;
- 下次瀏覽器向“pets-R-us.com”發(fā)出請(qǐng)求時(shí)，他會(huì)隨請(qǐng)求同時(shí)發(fā)送之前收到的cookie
- 服務(wù)器可以使用cookie實(shí)現(xiàn)個(gè)性化的體驗(yàn)，在這里就是向用戶推薦一些相關(guān)商品，不過cookie還有很多其他的用法，比如定制用戶體驗(yàn)，存儲(chǔ)數(shù)據(jù)，維護(hù)游戲狀態(tài)等。
注意：cookie與一個(gè)域關(guān)聯(lián)，如“pets-R-us.com”，而且只能發(fā)送給這個(gè)域
缺點(diǎn)
- 只有4k空間使用，我的應(yīng)用需要更多的存儲(chǔ)空間。
- 每次都要來回發(fā)送cookie,這看起來很低效，特別是使用移動(dòng)設(shè)備，消耗寬帶
- 使用cookie很容易向?yàn)g覽器傳送病毒和其他惡意軟件
HTML5中使用本地存儲(chǔ)
HTML5為我們提供了一個(gè)很棒也很簡(jiǎn)單的Javascript API，可以在瀏覽器中存儲(chǔ)要持久存儲(chǔ)的鍵值對(duì)。他會(huì)為瀏覽器每個(gè)域分配5到10M的存儲(chǔ)空間。應(yīng)用場(chǎng)景如下：
- 頁(yè)面可以在瀏覽器的本地存儲(chǔ)中存儲(chǔ)一個(gè)或多個(gè)鍵值對(duì)。
- 然后用鍵來獲取相應(yīng)的值。也可以把本地存儲(chǔ)的數(shù)據(jù)發(fā)送給服務(wù)器，完成一些服務(wù)器計(jì)算。
使用web storage API來存取數(shù)據(jù)
//存數(shù)據(jù)
localStorage.setItem("sticky_0", "pick up dry cleaning");
//取數(shù)據(jù),本地并沒有刪除，只是得到對(duì)應(yīng)指定鍵的值
localStorage.getItem("sticky_0");
也可以把localStorage對(duì)象看做一個(gè)關(guān)聯(lián)數(shù)組，不使用setItem方法，而是像下面這樣為鍵賦一個(gè)值：
//存儲(chǔ)
localStorage["sticky_0"] = "Pick up dry cleaning";
//獲取
var sticky = localStorage["sticky_0"];
通過屬性length屬性和key屬性，來操作localStorage
- length屬性包含本地存儲(chǔ)中的數(shù)據(jù)項(xiàng)數(shù)。
- key屬性是獲取localStorage中的鍵值。
例如：
for(var int = 0; i<localStorage.length; i++) {
var key = localStorage.key(i);
var value = localStorage[key];
alert(value);
}
清除域中所有的本地存儲(chǔ)
localStorage.clear();
使用API來判斷是否支持Web Storage
if(window["localStorage"]) {
//your localStorage code here...
}
注意： 使用localStorage，只能使用字符串作為鍵和值，假如你需要存儲(chǔ)整數(shù)5，可以存儲(chǔ)字符串“5”，也可以使用
localStorage.setItem("numitems", 1);
看起來這里像是存儲(chǔ)的一個(gè)整數(shù)，不過是Javascrit知道這必須是一個(gè)字符串，所以它會(huì)幫你將整數(shù)轉(zhuǎn)換為一個(gè)字符串，其實(shí)存儲(chǔ)的還是“1”。但是獲取的時(shí)候需要手動(dòng)的把他從字符串轉(zhuǎn)化為整數(shù)
var numItems = parseInt(localStorage.getItem("numitems"));
sessionStorage存儲(chǔ)，數(shù)據(jù)項(xiàng)只會(huì)在瀏覽器會(huì)話期間存儲(chǔ)，一旦會(huì)話結(jié)束，本地存儲(chǔ)的數(shù)據(jù)項(xiàng)就會(huì)被刪除。
- 字符串轉(zhuǎn)化為整數(shù)使用
parseInt - 字符串轉(zhuǎn)化為float類型
parseFloat - 數(shù)組轉(zhuǎn)化為json字符串
JSON.stringify(arr) - json串轉(zhuǎn)化為數(shù)組
JSON.parse(jsom)
