淺談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)));
    }
}