主要是本地存储,相当于Android中的SP。
代码
- 添加测试按钮
这个没什么说的
<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>
-
添加事件监听器和函数
//根据id拿到元素并创建监听器 //设置本地存储 document.getElementById("setLocalStorage").addEventListener("click", setLocalStorage); //显示存储数据 document.getElementById("showLocalStorage").addEventListener("click", showLocalStorage); //删除数据 document.getElementById("removeProjectFromLocalStorage").addEventListener("click", removeProjectFromLocalStorage); //根据key获取数据 document.getElementById("getLocalStorageByKey").addEventListener("click", getLocalStorageByKey); //获取本地存储对象 var localStorage = window.localStorage; //4个监听器函数,按顺序对应上面4个监听器 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")); } function removeProjectFromLocalStorage() { localStorage.removeItem("Project"); } function getLocalStorageByKey() { console.log(localStorage.key(0)); }
当点击第一个按钮set数据后,已经存储到了本地,点击第二个按钮展示结果如下
点击第三个按钮是单个移除
点击第四个按钮是根据key(index)移除
主要方法
方法 | 说明 |
---|---|
setItem(key, value) |
用于将项目设置到本地存储 |
getItem(key) |
用于从本地存储中获得项目 |
removeItem(key) |
用于从本地存储中删除该项目 |
key(index) |
用于通过使用在本地存储器中的项的索引获得的项目。项目是按字母顺序排序的 |
length() |
用于检索存在于本地存储器的项目数量 |
clear() |
用于从本地存储中删除所有的键/值对 |