本地存儲localStorage

時間 2019-11-09

標籤本地存儲 localstorage 简体版

原文原文鏈接

咱們能夠經過全局屬性localStorage訪問本地存儲功能，該屬性返回一個Storage對象，Storage對象用來保存鍵/值形式的字符串對象html

Storage對象有以下屬性和方法：瀏覽器

Storage對象能夠用來保存鍵/值對，其中鍵和值都必須是字符串。鍵必須是惟一的，這意味着若是咱們用Storage對象中的setItem方法設置相同的鍵名的鍵/值對，後面一個會覆蓋掉前面一個，事實上就是後面一個更新了已經存在的鍵的的值。安全

localStorage案例1（localStorage.html）：url

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>localStorage</title>
 6 <style>
 7 
 8 </style>
 9 </head>
10 
11 <body>
12 <ul>
13     <li>key:<input id="key" type="text" value=""></li>
14     <li>value:<input id="value" type="text" value=""></li>
15     <li>
16         <input id="add" type="button" value="add">
17         <input id="clear" type="button" value="clear">
18     </li>
19     <li id="countmsg">There are <span id="count"></span> items</li>
20 </ul>
21 <table id="data"></table>
22 <script>
23     displayData();
24     document.getElementById('add').onclick=handleButtonPress;
25     document.getElementById('clear').onclick=handleButtonPress;
26     function handleButtonPress(e){
27         switch(e.target.id){
28             case 'add':
29                 var key=document.getElementById('key').value;
30                 var value=document.getElementById('value').value;
31                 localStorage.setItem(key,value);
32                 break;
33             case 'clear':
34                 localStorage.clear();
35         }
36         displayData();
37     }
38     function displayData(){
39         var tableItem=document.getElementById('data');
40         tableItem.innerHTML='';
41         var itemCount=localStorage.length;
42         document.getElementById('count').innerHTML=itemCount;
43         for(var i=0;i<itemCount;i++){
44             var key=localStorage.key(i);
45             var val=localStorage[key];
46             tableItem.innerHTML+='<tr><th>'+key+'</th><td>'+val+'</td></tr>';
47         }
48     }
49 </script>
50 </body>
51 </html>

預覽效果：spa

該案例，當點擊add按鈕時會將數據添加到本地存儲中，當按下clear按鈕時則清楚本地存儲中的內容；code

在未清除的狀況下，咱們在相同的瀏覽器下訪問上面的案例，能夠看到刷新瀏覽器數據仍是存在的，關閉瀏覽器後重新訪問上面的案例數據同樣的仍是存在的。同源文檔（下面說的全部同源文檔都是在相同瀏覽器下訪問的指協議域名ip相同的頁面）也能夠訪問上面案例所存儲的數據htm

瀏覽器不會刪除咱們用localStorage添加的數據（永久存儲），除非用戶本身清除瀏覽器。（規範還容許數據由於安全緣由被移除，但並無說明什麼樣的安全緣由須要刪除本地數據）對象

監聽存儲事件blog

經過本地存儲功能保存的數據對全部來源相同的文檔都是可用的，某個文檔對本地存儲進行修改會觸發storage事件，咱們能夠監聽其餘同源文檔上的這個事件來確保咱們跟上最新變化，事件

與storage事件同時指派的對象是一個StorageEvent對象，它的成員以下表：

以下案例會監聽並編錄本地存儲對象上觸發的事件（storage.html）：

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 <table id="data">
 9     <tr>
10         <th>key</th>
11         <th>oldValue</th>
12         <th>newValue</th>
13         <th>url</th>
14         <th>storageArea</th>
15     </tr>
16 </table>
17 <script>
18     var tableItem=document.getElementById('data');
19     window.onstorage=handleStorage;
20     function handleStorage(e){
21         var row='<tr><td>'+ e.key+'</td><td>'+ e.oldValue+'</td><td>'+ e.newValue+'</td><td>'+ e.url+'</td><td>'+(e.storageArea==localStorage)+'</td></tr>';
22         tableItem.innerHTML+=row;
23     }
24 </script>
25 </body>
26 </html>

在相同的瀏覽器下同時訪問上面兩個案例時，在第一個案例每添加或者修改或者clear，都會立馬在第二案例中展示出來，注意不能刷新第二案例的，不然第二個案例會無數據。

注意storage事件不會在製造變化的文檔內指派，只在其餘同源文檔裏可用

相關標籤/搜索

每日一句

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