localStorage 和 sessionStorage

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

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

客户端存储数据的两个对象为：

• localStorage - 没有时间限制的数据存储
• sessionStorage - 针对一个 session 的数据存储
• localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。
• sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：

• 保存数据：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 可以将对象转换为字符串。

var site = new Object; ... var str = JSON.stringify(site); // 将对象转换为字符串

之后我们使用 JSON.parse 方法将字符串转换为 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  }

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