Cordova 存儲

我們可以使用存儲API來存儲客戶端應(yīng)用程序上的數(shù)據(jù)。這將有助于在用戶離線時使用應(yīng)用程序，并且還可以提高性能。由于這是初學者教程，我們將向您介紹如何使用本地存儲。在我們后面的教程中，我們將向您展示可以使用的其他插件。

步驟1 - 添加按鈕

我們將在 index.html 文件中創(chuàng)建四個按鈕。按鈕將位于 div class =“app"元素內(nèi)。

<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 - 添加事件監(jiān)聽器

Cordova安全策略不允許內(nèi)聯(lián)事件，因此我們將在 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 - 創(chuàng)建函數(shù)

現(xiàn)在我們需要創(chuàng)建當按下按鈕時被調(diào)用的函數(shù)。第一個函數(shù)用于將數(shù)據(jù)添加到本地存儲。

function setLocalStorage() {
   localStorage.setItem("Name", "John");
   localStorage.setItem("Job", "Developer");
   localStorage.setItem("Project", "Cordova Project");
}

下一個將記錄我們添加到控制臺的數(shù)據(jù)。

function showLocalStorage() {
   console.log(localStorage.getItem("Name"));
   console.log(localStorage.getItem("Job"));
   console.log(localStorage.getItem("Project"));
}	

如果我們點擊 SET LOCAL STORAGE 按鈕，我們將設(shè)置三個項目到本地存儲。如果我們點擊 SHOW LOCAL STORAGE ，控制臺將記錄我們想要的項目。

現(xiàn)在讓我們創(chuàng)建將從本地存儲中刪除項目的函數(shù)。

function removeProjectFromLocalStorage() {
   localStorage.removeItem("Project");
}

如果我們在刪除項目后點擊 SHOW LOCAL STORAGE 按鈕，輸出將顯示項目字段的 null 值。

我們還可以使用 key()方法獲取本地存儲元素，它將索引作為參數(shù)，并返回具有相應(yīng)索引值的元素。

function getLocalStorageByKey() {
   console.log(localStorage.key(0));
}

現(xiàn)在，當我們點擊 GET BY KEY 按鈕時，我們將獲得以下輸出。

注意

當我們使用 key()方法時，即使我們傳遞了參數(shù) 0 ，控制臺還是會記錄 job，而不是 name 以檢索第一對象。這是因為本地存儲以字母順序存儲數(shù)據(jù)。

下表顯示了所有可用的本地存儲方法。