本地存儲

時間 2019-11-12

標籤本地存儲简体版

原文原文鏈接

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>本地存儲</title>
 6 </head>
 7 <body>
 8     <h1>webStorage本地存儲</h1>
 9     <p id="msg"></p>
10     <p id="forever"></p>
11     <input type="text" id="input">
12     <input type="button" value="保存數據" onclick="saveStorage('input');">
13     <input type="button" value="讀取數據" onclick="loadStorage('msg');">
14 </body>
15 <script type="text/javascript">
16     function saveStorage(id){
17         var target = document.getElementById(id);
18         var str = target.value;
19         sessionStorage.setItem('mess',str);//臨時保存
20         localStorage.setItem('mess',str);//永久保存
21     }
22 
23     function loadStorage(id){
24         var target = document.getElementById(id);
25         var forever = document.getElementById('forever');
26         var msg = sessionStorage.getItem('mess');
27         target.innerHTML = "臨時數據：" + msg;
28         forever.innerHTML = "永久數據：" + localStorage.getItem('mess');
29     }
30 </script>
31 </html>

測試本地存儲是否已被填充

在 main.js 開頭，咱們先測試本地存儲是否已被填充（即，頁面以前被訪問過）：javascript

if(!.getItem('bgcolor')){localStorage

populateStorage();

}else{

setStyles();

Storage.getItem() 方法用來從存儲中獲取一個數據項。該例中，咱們測試 bgcolor 數據項是否存在。若是不存在，執行 populateStorage() 來將存在的自定義值添加到存儲中。若是有值存在，則執行 setStyles() 來使用存儲的值更新頁面的樣式。html

備註：你還可使用 Storage.length 來測試存儲對象是否爲空。java

從存儲中獲取值

正如上面提到的，使用 Storage.getItem() 能夠從存儲中獲取一個數據項。該方法接受數據項的鍵做爲參數，並返回數據值。例如：git

functionsetStyles(){

var=.getItem('bgcolor'); currentColorlocalStorage

var=.getItem('font'); currentFontlocalStorage

var=.getItem('image'); currentImagelocalStorage

.getElementById('bgcolor').=;  documentvaluecurrentColor

.getElementById('font').=;  documentvaluecurrentFont

.getElementById('image').=;  documentvaluecurrentImage

..='#'+;  htmlElemstylebackgroundColorcurrentColor

..=;  pElemstylefontFamilycurrentFont

.setAttribute('src',);  imgElemcurrentImage

首先，前三行代碼從本地中獲取值。接着，將值顯示到表單元素中，這樣在從新加載頁面時與自定義設置保持同步。最後，更新頁面的樣式和圖片，這樣從新加載頁面後，你的自定義設置從新起做用了。github

在存儲中設置值

Storage.setItem() 方法可被用來建立新數據項和更新已存在的值。該方法接受兩個參數——要建立/修改的數據項的鍵，和對應的值。web

functionpopulateStorage(){

.setItem('bgcolor',.getElementById('bgcolor').);  localStoragedocumentvalue

.setItem('font',.getElementById('font').);  localStoragedocumentvalue

.setItem('image',.getElementById('image').);  localStoragedocumentvalue

setStyles();

populateStorage() 方法在本地存儲中設置三項數據 — 背景顏色、字體和圖片路徑。而後執行 setStyles() 方法來更新頁面的樣式。session

同時，咱們爲每一個表單元素綁定了一個 onchange 監聽器，這樣，一個表單值改變時，存儲的數據和頁面樣式會更新。測試

.=;bgcolorFormonchangepopulateStorage

.=;fontFormonchangepopulateStorage

.=;imageFormonchangepopulateStorage

經過 StorageEvent 響應存儲的變化

不管什麼時候，Storage 對象發生變化時（即建立/更新/刪除數據項時，重複設置相同的鍵值不會觸發該事件，Storage.clear() 方法至多觸發一次該事件），StorageEvent 事件會觸發。在同一個頁面內發生的改變不會起做用——在相同域名下的其餘頁面（如一個新標籤或 iframe）發生的改變纔會起做用。在其餘域名下的頁面不能訪問相同的 Storage 對象。字體

在事件結果頁面中的 JavaScript 以下所示（可見 events.js）：url

.addEventListener('storage',function(){windowe

.querySelector('.my-key').=.;  documenttextContentekey

.querySelector('.my-old').=.;  documenttextContenteoldValue

.querySelector('.my-new').=.;  documenttextContentenewValue

.querySelector('.my-url').=.;  documenttextContenteurl

.querySelector('.my-storage').=.;  documenttextContentestorageArea

});

這裏，咱們爲 window 對象添加了一個事件監聽器，在當前域名相關的 Storage 對象發生改變時該事件監聽器會觸發。正如你在上面看到的，此事件相關的事件對象有多個屬性包含了有用的信息——改變的數據項的鍵，改變前的舊值，改變後的新值，改變的存儲對象所在的文檔的 URL，以及存儲對象自己。

刪除數據記錄

Web Storage 提供了一對簡單的方法用於移除數據。咱們沒用在咱們的 demo 中使用這些方法，可是添加到你本身的項目中很簡單：

Storage.removeItem() 接受一個參數——你想要移除的數據項的鍵，而後會將對應的數據項從域名對應的存儲對象中移除。
Storage.clear() 不接受參數，只是簡單地清空域名對應的整個存儲對象。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。