localStorage中怎么存对象?

时间:2022-07-26
本文章向大家介绍localStorage中怎么存对象?,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
function person(name, age){
this.name=name;
this.age=age;}

在js代码中,我们新建一个person对象:

var p=new person(‘yubo’, 21);

下面就是关键的步骤了,我们将对象转化为字符串:

var objStr=JSON.stringify(p);

注意了:JSON.stringify()函数就是把一个对象转化为字符串

然后,你就可以将objStr按正常的方式存入localStorage中了,如下所示:

var s=window.localStorage;
s.setItem(“person”, objStr);
  • Web Storage

Web Storage实际上由两部分组成:sessionStorage与localStorage[1]  。 sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。 localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。

  • 背景

兼容性测试结果表

Web应用的发展,使得客户端存储使用得也越来越多,而实现客户端存储的方式则是多种多样。最简单而且兼容性最佳的方案是Cookie,但是作为真正的客户端存储,Cookie则存在很多致命伤。此外,在IE6及以上版本中还可以使用user Data Behavior、在Firefox下可以使用global Storage、在有Flash插件的环境中可以使用Flash Local Storage,但是这几种方式都存在兼容性方面的局限性,因此真正使用起来并不理想。

针对以上情况,HTML5中给出了更加理想的解决方案:假如你需要存储复杂的数据则可以使用Web Database,可以像客户端程序一样使用SQL(不过Web Database标准当前正陷于僵局之中,而且目前已经实现的浏览器很有限);假如你需要存储的只是简单的用key/value对即可解决的数据则可以使用Web Storage。

  • web storage优势

web storage存储空间

存储空间 更大:IE8下每个独立的存储空间为10M,其他浏览器实现略有不同,但都比Cookie要大很多。

web storage服务器

存储内容不会发送到服务器:当设置了Cookie后,Cookie的内容会随着请求一并发送的服务器,这对于本地存储的数据是一种带宽浪费。而Web Storage中的数据则仅仅是存在本地,不会与服务器发生任何交互。

web storage接口

更多丰富易用的接口:Web Storage提供了一套更为丰富的接口,使得数据操作更为简便。

web storage存储空间

独立的存储空间:每个域(包括子域)有独立的存储空间,各个存储空间是完全独立的,因此不会造成数据混乱。