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()

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