cordova - Cordova存储 - cordova教程 , 学习cordova , cordova android , cordova ios
- 我们可以使用数据存储API将数据存储在客户端应用程序。
- 这有助于应用程序的使用，当用户处于脱机状态，同时也可以提高性能。
- 由于这是初学者教程，我们只将向您展示如何使用本地存储。
- 在我们以后的教程中会学习使用其他插件。
cordova教程 - cordova - 学习cordova - cordova memory storage - Cordova存储 - apache cordova代码- apache cordova的例子
Wikitechy cordova tutorial tags - apache cordova , cordova教程 , 学习cordova , cordova android , cordova ios , cordova plugin add , cordova android studio , phonegap android , phonegap ios , cordova下载 , apache cordova是什么 , cordova plugin开发 , apache cordova教程 , cordova 教程 , cordova插件开发 , cordova菜鸟教程 , 菲律宾cordova岛 , cordova 持续定位
第1步 - 添加按钮
- 我们将在 index.html 文件创建四个按钮。这些按钮将位于div class = "app" 的元素中。
cordova教程 - cordova - 学习cordova - cordova button - cordova按钮 - apache cordova代码- apache cordova的例子
<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>Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy cordova tutorial team
运行后显示结果如下：
学习cordova - cordova教程 - apache - cordova示例 - cordova程序
第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; Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy cordova tutorial team
第3步 - 创建函数
- 现在，我们需要创建当按钮被点击后将调用函数。第一函数用于将数据添加到本地存储。
function setLocalStorage() {
localStorage.setItem("Name", "John");
localStorage.setItem("Job", "Developer");
localStorage.setItem("Project", "Cordova Project");
}Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy cordova tutorial team
- 下一个会记录数据，我们添加到控制台。
function showLocalStorage() {
console.log(localStorage.getItem("Name"));
console.log(localStorage.getItem("Job"));
console.log(localStorage.getItem("Project"));
}Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy cordova tutorial team
- 如果我们点击 LOCAL STORAGE 按钮，我们将设置三个项目到本地存储。如果我们点击 SHOW LOCAL STORAGE 之后，控制台会记录我们想要的项目。
- Local Storage Log
- 现在让我们创建的函数来存储本地删除项目。
function removeProjectFromLocalStorage() {
localStorage.removeItem("Project");
}Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy cordova tutorial team
- 如果我们点击SHOW LOCAL STORAGE按钮后，我们删除了该项目，输出将显示该项目字段则为空值。
- Local Sorage Log Removed Item
- 我们还可以通过使用key() 方法将采取指数作为参数，并返回相应的索引值的元素的本地存储元素。
function getLocalStorageByKey() {
console.log(localStorage.key(0));
}Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy cordova tutorial team
- 现在，当我们轻点GET BY KEY 按钮，我们将得到以下的输出。
cordova教程 - cordova - 学习cordova - cordova memory storage - Cordova存储 - apache cordova代码- apache cordova的例子
Wikitechy cordova tutorial tags - apache cordova , cordova教程 , 学习cordova , cordova android , cordova ios , cordova plugin add , cordova android studio , phonegap android , phonegap ios , cordova下载 , apache cordova是什么 , cordova plugin开发 , apache cordova教程 , cordova 教程 , cordova插件开发 , cordova菜鸟教程 , 菲律宾cordova岛 , cordova 持续定位
注
- 当我们用key() 方法在控制台记录工作，而不是名称，即使我们通过参数0获取第一个对象。这是因为本地存储空间，按字母顺序排列存储数据。
- 下表列出了所有本地存储可用的方法。
| SN |
方法与说明
|
|---|---|
| 1 |
setItem(key, value)
用于将项目设置到本地存储
|
| 2 |
getItem(key)
用于从本地存储中获得项目
|
| 3 |
removeItem(key)
用于从本地存储中删除该项目
|
| 4 |
key(index)
用于通过使用在本地存储器中的项的索引获得的项目。项目是按字母顺序排序的
|
| 5 |
length()
用于检索存在于本地存储器的项目数量
|
| 6 |
clear()
用于从本地存储中删除所有的键/值对
|