码迷,mamicode.com
首页 > 其他好文 > 详细

localStorage 和 sessionStorage

时间:2017-05-02 16:46:09      阅读:303      评论:0      收藏:0      [点我收藏+]

标签:str   strong   rip   item   存储   site   convert   ie版本   firefox   

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

localStorage 和 sessionStorage

标签:str   strong   rip   item   存储   site   convert   ie版本   firefox   

原文地址:http://www.cnblogs.com/linsx/p/6796697.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!