Cordova - 存储

我们可以使用可用的存储 API 来在客户端应用程序上存储数据。这将有助于用户离线时应用程序的使用，还可以提高性能。由于本教程面向初学者，我们将向您展示如何使用本地存储。在我们后续的教程中，我们将向您展示可以使用的其他插件。

步骤 1 - 添加按钮

我们将在 index.html 文件中创建四个按钮。这些按钮将位于 div class = "app" 元素内。

<button id = "setLocalStorage">设置本地存储</button>
<button id = "showLocalStorage">显示本地存储</button>
<button id = "removeProjectFromLocalStorage">删除项目</button>
<button id = "getLocalStorageByKey">通过密钥获取</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"); 
} 

The next one will log the data we added to console.

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

现在，当我们点击 GET BY KEY 按钮时，将显示以下输出。

注意

当我们使用 key() 方法时，即使我们传递了参数 0 来检索第一个对象，控制台也会记录 job 而不是 name。这是因为本地存储按字母顺序存储数据。

下表显示了所有可用的本地存储方法。