炫意html5
最早CSS3和HTML5移动技术网站之一

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 之后,控制台会记录我们想要的项目。

Local Storage Log

现在让我们创建的函数来存储本地删除项目。
function removeProjectFromLocalStorage() {
localStorage.removeItem("Project");
}
如果我们点击SHOW LOCAL STORAGE按钮后,我们删除了该项目,输出将显示该项目字段则为空值。

Local Sorage Log Removed Item

我们还可以通过使用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()

用于从本地存储中删除所有的键/值对

炫意HTML5 » Cordova存储

Java基础教程Android基础教程