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")); 
} 	

如果我們點選設定本地儲存按鈕，我們將設定三個專案到本地儲存。如果我們隨後點選顯示本地儲存，控制檯將記錄我們想要的內容。

現在讓我們建立從本地儲存中刪除專案的函式。

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

如果在刪除專案後我們點選顯示本地儲存按鈕，輸出將顯示專案欄位的null值。

我們還可以使用key()方法獲取本地儲存元素，該方法將採用索引作為引數並返回具有相應索引值的元素。

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

現在，當我們點選按鍵獲取按鈕時，將顯示以下輸出。

注意

當我們使用key()方法時，即使我們傳遞引數0來檢索第一個物件，控制檯也會記錄job而不是name。這是因為本地儲存以字母順序儲存資料。

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