Cordova教學 » Cordova儲存

Cordova儲存

我們可以使用資料儲存API將資料儲存在用戶端應用程式。這有助於應用程式的使用，當使用者處於離線狀態，同時也可以提高效能。由於這是初學者教學，我們只將向您展示如何使用本地儲存。在我們以後的教學中會學習使用其他外掛。

第1步 - 新增按鈕

我們將在 index.html 檔案建立四個按鈕。這些按鈕將位於div class = "app" 的元素中。 
<button id = "setLocalStorage">SET LOCAL STORAGE</button>
<button id = "showLocalStorage">SHOW LOCAL STORAGE</button>
<button id = "removeProjectFromLocalStorage">REMOVE PROJECT</button>
<button id = "getLocalStorageByKey">GET BY KEY</button>
執行後顯示結果如下：


第2步 - 新增事件監聽器

Cordova安全策略不允許內嵌事件，以便我們將在index.js檔案內增加事件偵聽器。我們也將分配給window.localStorage，稍後會使用localStorage 變數。 

document.getElementById("setLocalStorage").addEventListener("click", setLocalStorage);
document.getElementById("showLocalStorage").addEventListener("click", showLocalStorage);
document.getElementById("removeProjectFromLocalStorage").addEventListener
   ("click", removeProjectFromLocalStorage);
document.getElementById("getLocalStorageByKey").addEventListener
   ("click", getLocalStorageByKey);

var localStorage = window.localStorage;

第3步 - 建立函式

現在，我們需要建立當按鈕被點選後將呼叫函式。第一函式用於將資料新增到本地儲存。 

function setLocalStorage() {
   localStorage.setItem("Name", "John");
   localStorage.setItem("Job", "Developer");
   localStorage.setItem("Project", "Cordova Project");
}
下一個會記錄資料，我們新增到控制台。 
function showLocalStorage() {
   console.log(localStorage.getItem("Name"));
   console.log(localStorage.getItem("Job"));
   console.log(localStorage.getItem("Project"));
}	 

如果我們點選 LOCAL STORAGE 按鈕，我們將設定三個專案到本地儲存。如果我們點選 SHOW LOCAL STORAGE 之後，控制台會記錄我們想要的專案。

現在讓我們建立的函式來儲存本地刪除專案。 
function removeProjectFromLocalStorage() {
   localStorage.removeItem("Project");
}
如果我們點選SHOW LOCAL STORAGE按鈕後，我們刪除了該專案，輸出將顯示該專案欄位則為空值。
我們還可以通過使用key() 方法將採取指數作為引數，並返回相應的索引值的元素的本地儲存元素。 
function getLocalStorageByKey() {
   console.log(localStorage.key(0));
}
現在，當我們輕點GET BY KEY 按鈕，我們將得到以下的輸出。

註

當我們用key() 方法在控制台記錄工作，而不是名稱，即使我們通過引數0獲取第一個物件。這是因為本地儲存空間，按字母順序排列儲存資料。

下表列出了所有本地儲存可用的方法。
SN
方法與說明
1

setItem(key, value)

用於將專案設定到本地儲存
2

getItem(key)

用於從本地儲存中獲得專案
3

removeItem(key)

用於從本地儲存中刪除該專案
4

key(index)

用於通過使用在本地儲存器中的項的索引獲得的專案。專案是按字母順序排序的
5

length()

用於檢索存在於本地儲存器的專案數量
6

clear()

用於從本地儲存中刪除所有的鍵/值對