主要是本地存儲炮捧,相當(dāng)于Android中的SP闯冷。
代碼
- 添加測試按鈕
這個(gè)沒什么說的
<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>
-
添加事件監(jiān)聽器和函數(shù)
//根據(jù)id拿到元素并創(chuàng)建監(jiān)聽器 //設(shè)置本地存儲 document.getElementById("setLocalStorage").addEventListener("click", setLocalStorage); //顯示存儲數(shù)據(jù) document.getElementById("showLocalStorage").addEventListener("click", showLocalStorage); //刪除數(shù)據(jù) document.getElementById("removeProjectFromLocalStorage").addEventListener("click", removeProjectFromLocalStorage); //根據(jù)key獲取數(shù)據(jù) document.getElementById("getLocalStorageByKey").addEventListener("click", getLocalStorageByKey); //獲取本地存儲對象 var localStorage = window.localStorage; //4個(gè)監(jiān)聽器函數(shù)温数,按順序?qū)?yīng)上面4個(gè)監(jiān)聽器 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)); }
當(dāng)點(diǎn)擊第一個(gè)按鈕set數(shù)據(jù)后古徒,已經(jīng)存儲到了本地爆雹,點(diǎn)擊第二個(gè)按鈕展示結(jié)果如下
展示數(shù)據(jù)
點(diǎn)擊第三個(gè)按鈕是單個(gè)移除
點(diǎn)擊第四個(gè)按鈕是根據(jù)key(index)移除
主要方法
方法 | 說明 |
---|---|
setItem(key, value) |
用于將項(xiàng)目設(shè)置到本地存儲 |
getItem(key) |
用于從本地存儲中獲得項(xiàng)目 |
removeItem(key) |
用于從本地存儲中刪除該項(xiàng)目 |
key(index) |
用于通過使用在本地存儲器中的項(xiàng)的索引獲得的項(xiàng)目性穿。項(xiàng)目是按字母順序排序的 |
length() |
用于檢索存在于本地存儲器的項(xiàng)目數(shù)量 |
clear() |
用于從本地存儲中刪除所有的鍵/值對 |