cordova - Cordova存储 - cordova教程 , 学习cordova , cordova android , cordova ios



  • 我们可以使用数据存储API将数据存储在客户端应用程序。
  • 这有助于应用程序的使用,当用户处于脱机状态,同时也可以提高性能。
  • cordova教程 - cordova - 
学习cordova - 
cordova memory storage - Cordova存储 - apache cordova代码- apache cordova的例子

    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的例子

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

运行后显示结果如下:

 apache

学习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的例子

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

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

wikitechy provides you the following points such as cordova , cordova教程 , 学习cordova , cordova android , cordova ios , cordova plugin add , cordova android studio , phonegap android , phonegap ios , cordova api , cordova-android , phonegap cordova , cordova plugin , cordova下载 , apache cordova是什么 , cordova cli , cordova plugin开发 , apache cordova教程 , cordova 教程 , vue cordova , ngcordova , ionic cordova , cordova plugin file , cordova 安装 , ionic 会取代cordova么 , cordova怎么样 , cordova插件开发 ,cordova菜鸟教程 , cordova react , cordova ionic vuejs , 菲律宾cordova岛 , cordova 持续定位 , phonegap , cordoba , cordova plugins , cardova , apache cordova , cordova phonegap , ionic cordova phonegap , apache cordova alternatives , cordova for visual studio , best ide for cordova development , create cordova plugin android , cordova ios 4 , apache cordova download , cordova build command , cordova web support , cordova webview android , how to install cordova , phonegap developer , apache cordova ionic , cordova command

Related Searches to Cordova存储