localStorage 和 sessionStorage

時間 2019-11-29

標籤 localstorage sessionstorage 欄目網站開發简体版

原文原文鏈接

Internet Explorer 8+, Firefox, Opera, Chrome, 和 Safari支持Web 存儲。javascript

注意: Internet Explorer 7 及更早IE版本不支持web 存儲.html

客戶端存儲數據的兩個對象爲：html5

localStorage - 沒有時間限制的數據存儲
sessionStorage - 針對一個 session 的數據存儲
localStorage 對象存儲的數據沒有時間限制。次日、第二週或下一年以後，數據依然可用。
sessionStorage 方法針對一個 session 進行數據存儲。當用戶關閉瀏覽器窗口後，數據會被刪除。

無論是 localStorage，仍是 sessionStorage，可以使用的API都相同，經常使用的有以下幾個（以localStorage爲例）：java

保存數據：localStorage.setItem(key,value);
讀取數據：localStorage.getItem(key);
刪除單個數據：localStorage.removeItem(key);
刪除全部數據：localStorage.clear();
獲得某個索引的key：localStorage.key(index);

save() 與 find() 方法

 1 //保存數據
 2 function save(){
 3 　　var siteurl = document.getElementById("siteurl").value;
 4    var sitename = document.getElementById("sitename").value; 
 5    localStorage.setItem(sitename, siteurl); alert("添加成功"); 
 6 } 
 7 //查找數據 
 8 function find(){ 
 9 　　var search_site = document.getElementById("search_site").value; 
10 　　var sitename = localStorage.getItem(search_site);
11 　　 var find_result = document.getElementById("find_result"); 
12 　　find_result.innerHTML = search_site + "的網址是：" + sitename; 
13 }

接下來咱們將使用 JSON.stringify 來存儲對象數據，JSON.stringify 能夠將對象轉換爲字符串。web

var site = new Object; ... var str = JSON.stringify(site); // 將對象轉換爲字符串

以後咱們使用 JSON.parse 方法將字符串轉換爲 JSON 對象：json

var site = JSON.parse(str);

JavaScript 實現代碼：數組

save() 與 find() 方法

 1 //保存數據 
 2 function save(){ 
 3 　　var site = new Object; 
 4 　　site.keyname = document.getElementById("keyname").value; 
 5 　　site.sitename = document.getElementById("sitename").value; 
 6 　　site.siteurl = document.getElementById("siteurl").value;
 7 　  var str = JSON.stringify(site); 
 8 // 將對象轉換爲字符串 
 9 localStorage.setItem(site.keyname,str); alert("保存成功"); } 
10 //查找數據 
11 function find(){ var search_site = document.getElementById("search_site").value;
12  　　var str = localStorage.getItem(search_site); 
13 　　var find_result = document.getElementById("find_result"); 
14 　　var site = JSON.parse(str); 
15 　　find_result.innerHTML = search_site + "的網站名是：" + site.sitename + "，網址是：" + site.siteurl;
16  }

JSON.stringify() 方法用於將 JavaScript 值轉換爲 JSON 字符串。瀏覽器

語法

JSON.stringify(value[, replacer[, space]])

參數說明：session

value:
必需，一個有效的 JSON 字符串。函數
replacer:
可選。用於轉換結果的函數或數組。

若是 replacer 爲函數，則 JSON.stringify 將調用該函數，並傳入每一個成員的鍵和值。使用返回值而不是原始值。若是此函數返回 undefined，則排除成員。根對象的鍵是一個空字符串：""。

若是 replacer 是一個數組，則僅轉換該數組中具備鍵值的成員。成員的轉換順序與鍵在數組中的順序同樣。當 value 參數也爲數組時，將忽略 replacer 數組。
space:
可選，文本添加縮進、空格和換行符，若是 space 是一個數字，則返回值文本在每一個級別縮進指定數目的空格，若是 space 大於 10，則文本縮進 10 個空格。space 有可使用非數字，如：\t。

返回值：

返回包含 JSON 文本的字符串。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>菜鳥教程(runoob.com)</title>
 6 </head>
 7 <body>
 8 
 9 <p id="demo"></p>
10 <script>
11 var str = {"name":"菜鳥教程", "site":"http://www.runoob.com"}
12 str_pretty1 = JSON.stringify(str)
13 document.write( "只有一個參數狀況：" );
14 document.write( "<br>" );
15 document.write("<pre>" + str_pretty1 + "</pre>" );
16 document.write( "<br>" );
17 str_pretty2 = JSON.stringify(str, null, 4) //使用四個空格縮進
18 document.write( "使用參數狀況：" );
19 document.write( "<br>" );
20 document.write("<pre>" + str_pretty2 + "</pre>" ); // pre 用於格式化輸出
21 </script>
22 
23 </body>
24 </html>

JSON.parse() 方法用於將一個 JSON 字符串轉換爲對象。

語法

JSON.parse(text[, reviver])

參數說明：

text:必需，一個有效的 JSON 字符串。
reviver: 可選，一個轉換結果的函數，將爲對象的每一個成員調用此函數。

返回值：

返回給定 JSON 字符串轉換後的對象。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>菜鳥教程(runoob.com)</title>
 6 </head>
 7 <body>
 8 
 9 <h2>使用可選參數，回調函數</h2>
10 <p id="demo"></p>
11 <script>
12 JSON.parse('{"p": 5}', function(k, v) {
13     if (k === '') { return v; } 
14     return v * 2;               
15 });                          
16 JSON.parse('{"1": 1, "2": 2, "3": {"4": 4, "5": {"6": 6}}}', function(k, v) {
17   document.write( k );// 輸出當前屬性，最後一個爲 ""
18   document.write("<br>");
19   return v;       // 返回修改的值
20 });
21 </script>
22 
23 </body>
24 </html>

1 obj["3"]["4"]  == 4  
2 
3 life 2017-5-2 16:45:15
4 
5 obj["3"]["5"]["6"] == 6 
6 
7 由於是數字作key
8 不能寫成 obj.3.4  要寫成  obj["3"]["4"]

http://www.runoob.com/html/html5-webstorage.html

http://www.runoob.com/js/javascript-json-stringify.html

http://www.runoob.com/js/javascript-json-parse.html

相關標籤/搜索

localstorage&sessionstorage

cookie&sessionstorage&localstorage

vue+elementui+vuex+sessionstorage

vue2.0+vuex+localstorage

vue+less+localstorage

每日一句

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