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