HTML5 – 本地存儲

作者：佚名 2017-01-03 18:09:33

移動開發

HTML5 Web Storage API 讓在本地存儲數據成為了可能，而且可以存儲 5M 的數據，這 5M 的空間可供一個域任意使用。注意是一個域，這也就是說所保存的數據是不可跨域訪問的。

我一向喜歡在實踐中學習新的知識，今天也不例外，我利用 loalStorage 做了一個便簽小應用，數據存放在瀏覽器中。

怎么樣，還不錯吧?下面就用這個例子的開發流程來介紹 localStorage 吧!

起步

在這里，我就不在粘貼 HTML 和 CSS 代碼了，如果你想在本地運行這個例子，我將在文章末尾給出源碼下載地址。

首先，我想講講該怎么創建這么一個便簽，它的具體過程應該像下面這樣。

獲取用戶輸入的內容
獲取便簽的等級，這個是在 <select> 中選擇的。
將內容和等級保存在一個對象中，利用 JSON 轉換為字符串。
生成一個 key，用于保存數據，為了查找方便，創建一個數組，單獨來存儲 key，當然這個數組也利用 JSON 轉換成字符串。
使用 localStorage 的 setItem() 方法保存便簽對象和 key數組字符串。
將標簽添加到 DOM 結構。

按照上述流程，可以編寫下面的代碼

function createNote() { 
    var noteElement = document.getElementById("note"); 
    var noteValue = noteElement.value; 
    noteElement.value = ""; 
 
    var levelObj = document.getElementById("note-level"); 
    var index = levelObj.selectedIndex; 
    var level = levelObj[index].value; 
 
    var noteObj = { 
        "value": noteValue, 
        "level": level 
    } 
 
    var date = new Date(); 
    var key = "note_" + date.getTime(); 
    localStorage.setItem(key, JSON.stringify(noteObj)); 
 
    var notesArray = getNotesArray(); 
    notesArray.push(key); 
    localStorage.setItem("notesArray", JSON.stringify(notesArray)); 
 
    addNoteToDOM(key, noteObj); 
}

值得注意的是，localStorage 只能保存字符串的值，所以我們在這里才不得不使用 JSON 將其轉換成字符串。你可以使用下屬代碼存儲一個整數或者浮點數。

localStorage.setItem("my_num",10);

這行代碼確實可以運行，那是因為 JS 自動將其轉換成了字符串，所以如果你想取出一個整數，你不得不進行轉換，就像下面這樣。

var num = parseInt(localStorage.getItem("my_num"));

上面的代碼中，使用了兩個自定義的函數，那就是 getNotesArray() 和 addNoteToDOM()，根據名字可以很容易判斷出它們的功能。不過讓人費解的是，我們為什么要專門使用一個數組去保存 key 呢?

有一點你需要知道，在實際的網站中，你不可能只存儲便簽吧?你還需要存儲很多其它的數據，如果保存了大量的其它數據，那么尋找便簽就是一項十分耗時的任務了。我為什么要尋找便簽?

如果你的用戶關掉了瀏覽器，然后又重新打開了這個網站怎么辦呢?這個時候我們就不得不去尋找便簽了。好了，下面來看看 getNotesArray() 函數吧～

function getNotesArray() { 
    var notesArray = localStorage.getItem("notesArray"); 
 
    if (!notesArray) { 
        notesArray = []; 
        localStorage.setItem("notesArray", JSON.stringify(notesArray)); 
    } else { 
        notesArray = JSON.parse(notesArray); 
    } 
 
    return notesArray; 
}

利用 localStorage.getItem() 去獲取這個數組，如果這個數組不存在就創建一個，然后將其轉換成字符串保存起來，如果數組已經存在，那就將其從字符串轉成數組。總之，要返回一個數組，供我們使用。

好了，大概已經知道了，下面就是 addNoteToDOM() 函數了，這個函數就更簡單啦，下面來看看。

function addNoteToDOM(key, noteObj) { 
    var notes = document.getElementById("note-list"); 
    var note = document.createElement("li"); 
    note.setAttribute("id", key); 
    note.onclick = deleteNote; 
 
    var value = noteObj.value; 
    note.innerHTML = value; 
 
    var level = noteObj.level; 
    note.setAttribute("class", level); 
    notes.appendChild(note); 
}

首先，需要解釋一點，#note-list 是一個 <ul> 元素，而且我們的便簽也都是由其子元素 <li> 組成的。接下來就簡單了，我們將值賦給 <li>，然后根據標簽的等級為其添加不同的背景顏色，這里是通過為其設置 class 來達到這一目的。

值得注意的是，這里我們將 key 作為參數傳遞進來了，而且利用 key 的值為 <li> 設置了 id 屬性，這是為了達到刪除的目的，畢竟我們不能只創建標簽而不知道如果刪除吧，所以在這里還為 <li> 設置了點擊事件。

function deleteNote(e) { 
    var key = e.target.id; 
    localStorage.removeItem(key); 
    var notesArray = getNotesArray(); 
 
    for (var i = 0; i < notesArray.length; i++) { 
        if (key === notesArray[i]) { 
            notesArray.splice(i, 1); 
        } 
    } 
    localStorage.setItem("notesArray", JSON.stringify(notesArray)); 
 
    deleteNoteFromDOM(key); 
}

當 <li> 元素被點擊，就會傳進來一個 event 對象，通過 target 就可以獲得觸發事件的對象，我們獲取到這個對象的 id，將其從 DOM 刪除。

不過這個不是重點，刪除標簽，意味著，我們還需要將其從本地存儲中將其值刪除，而且要把它從 key 數組中除名，我們用 removeItem 和 splice() 來大到了這一目的。

拓展

上面，我們已經把 localStorage 的使用講解完畢了，而且上面的代碼包含了便簽應用的核心代碼。值得一提的是，還有一個 sessionStorage ，它的使用和 localStorage 完全相同，唯一不同的是，一旦瀏覽器窗口關閉，保存的數據將會被全部刪除。

當然，這是 HTML5 中的屬性，所以我們在使用的時候需要進行檢測，可以使用下面的代碼檢測瀏覽器是否支持 localStorage。

if (window["localStorage"]) { 
    // your logic code 
}

責任編輯：龐桂玉來源： Android開發中文站