淺談localStorage本地存儲

在年會的抽獎程序中用到了localStorage現在拿出來總結下，localStorage的相關用法。

在年會抽獎的程序中，需要把獲獎名單存儲下來，年會現場沒有網絡，能最簡單實現數據存儲的方式就是，將數據存到本地。在h5標准中正好有，localStorage支持。

兼容性

作為前端同學最關心的問題，我們可以在caniuse網站中看到兼容性的情況。

情況還是很樂觀的。

如何使用

localStorage.msg="hello";
console.log(localStorage.msg);

在頁面中執行如山代碼的時候，當你關閉頁面的時候，再次打開的時候還是可以讀取到 localStorage.msg 的值
test頁面

為了能更好的看到數據是可以讀取到的我們嘗試下面的實例

if (localStorage.pagecount) {
    localStorage.pagecount = 
	    Number(localStorage.pagecount) +1;
} else{
  localStorage.pagecount=1;
}
console.log(
		'Visits ' + 
		localStorage.pagecount + 
		' time(s).'
);

demo頁面

如果你使用的是chrome瀏覽器的話，在chrome調試台中，你可以看到localStorage存儲的數據。

進階

localStorage 可以作為一個微型的本地“數據庫”來用了，那么怎么實現數據的增刪改查呢？如何遍歷呢？還有localStorage有哪些限制？我們逐個來看看。（一下默認 localStorage = window.localStorage ）

1. 如何判斷是否支持?

if (window.localStorage) {
	alert('This browser supports localStorage');
} else {
	alert('This browser does NOT support');
}

2. 有何限制？

localStorage 的存儲格式都是字符串，任何其他類型都會轉成字符串存儲。

3. 如何存值（增）？

簡單的方法直接賦值

localStorage.a = 1；//注意存儲的值為'1'
localStorage['a'] = 1；

localStorage本身也有存值的方法setItem

localStorage.setItem('a','1');

4. 如何刪除值（刪）？

localStorage清除鍵值對的方法為removeItem，如果想一次清除所以值的話用

localStorage.removeItem('a');//清除a的值
localStorage.clear(); // 一無所有了所有數據都會干掉

5. 如何讀取值（查）？

直接獲取和getItem方法

var a1 = localStorage['a'];//獲取a的值
var a2 = localStorage.a;//獲取a的值
var a3 = localStorage.getItem('a');//獲取a的值

localStorage還提供了key方法用於遍歷。

function showStorage(){
	for(var i=0;i<localStorage.length;i++){
	    //key(i)獲得相應的鍵，再用getItem()方法獲得對應的值
	    console.log(localStorage.key(i),
			    localStorage.getItem(
					    localStorage.key(i)));
	}
}