前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >localStorage中怎么存对象?

localStorage中怎么存对象?

作者头像
kirin
发布2020-10-09 11:11:53
1.4K0
发布2020-10-09 11:11:53
举报
文章被收录于专栏:Kirin博客
代码语言:javascript
复制
function person(name, age){
this.name=name;
this.age=age;}

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

代码语言:javascript
复制
var p=new person(‘yubo’, 21);

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

代码语言:javascript
复制
var objStr=JSON.stringify(p);

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

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

代码语言:javascript
复制
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存储空间

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020/10/03 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
对象存储
对象存储(Cloud Object Storage,COS)是由腾讯云推出的无目录层次结构、无数据格式限制,可容纳海量数据且支持 HTTP/HTTPS 协议访问的分布式存储服务。腾讯云 COS 的存储桶空间无容量上限,无需分区管理,适用于 CDN 数据分发、数据万象处理或大数据计算与分析的数据湖等多种场景。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档