Cordova 存儲(chǔ)

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

步驟1 - 添加按鈕

我們將在 index.html 文件中創(chuàng)建四個(gè)按鈕。按鈕將位于 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)在我們需要?jiǎng)?chuàng)建當(dāng)按下按鈕時(shí)被調(diào)用的函數(shù)。第一個(gè)函數(shù)用于將數(shù)據(jù)添加到本地存儲(chǔ)。

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

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

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

如果我們點(diǎn)擊 SET LOCAL STORAGE 按鈕，我們將設(shè)置三個(gè)項(xiàng)目到本地存儲(chǔ)。如果我們點(diǎn)擊 SHOW LOCAL STORAGE ，控制臺(tái)將記錄我們想要的項(xiàng)目。

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

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

如果我們?cè)趧h除項(xiàng)目后點(diǎn)擊 SHOW LOCAL STORAGE 按鈕，輸出將顯示項(xiàng)目字段的 null 值。

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

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

現(xiàn)在，當(dāng)我們點(diǎn)擊 GET BY KEY 按鈕時(shí)，我們將獲得以下輸出。

注意

當(dāng)我們使用 key()方法時(shí)，即使我們傳遞了參數(shù) 0 ，控制臺(tái)還是會(huì)記錄 job，而不是 name 以檢索第一對(duì)象。這是因?yàn)楸镜卮鎯?chǔ)以字母順序存儲(chǔ)數(shù)據(jù)。

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