文档章节

使用sessionStorage、localStorage存储数组与对象

crazymus
 crazymus
发布于 2015/01/26 12:11
字数 231
阅读 44769
收藏 9

有时候,我们需要将数据存储到sessionStorage和localStorage中,这样做的好处有:

1 缓存数据

2 减少对内存的占用

但是,storage只能存储字符串的数据,对于JS中常用的数组或对象却不能直接存储。


var obj = { name:'Jim' };
sessionStorage.obj = obj; 
localStorage.obj = obj; 

var arr = [1,2,3]; 
sessionStorage.obj = arr; 
localStorage.obj = arr;



上面的写法都是不能成功的!但我们可以通过JSON对象提供的parse和stringify将其他数据类型转化成字符串,再存储到storage中就可以了。请看下面的代码。

var obj = { name:'Jim' }; 
var str = JSON.stringify(obj); 

//存入 
sessionStorage.obj = str; 
//读取 
str = sessionStorage.obj; 
//重新转换为对象 
obj = JSON.parse(str);




localStorage也一样,只是和sessionStorage的存储时间不一样。

需要注意的是,JS中的数组本质上也是对象类型,所以上面的代码对数组也是适用的。

© 著作权归作者所有

crazymus

crazymus

粉丝 68
博文 73
码字总数 108051
作品 8
程序员
私信 提问
加载中

评论(8)

疯车车
疯车车
<script>alert("xss");</script>
devinzx
devinzx
666
c
change_zmc
专门登陆来评论,很棒
crazymus
crazymus

引用来自“伊莱吻”的评论

是不是sessionStorage里面只能存放字符串类型?
是的~
伊莱吻
伊莱吻
是不是sessionStorage里面只能存放字符串类型?
leeahua
leeahua
L
Leonsoft
Storage.prototype.put = function(key, value) {
this.setItem(key, JSON.stringify(value));
}

Storage.prototype.get= function(key) {
var value = this.getItem(key);
return value && JSON.parse(value);
}

see http://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage
云墨雪
云墨雪
屌屌屌! 谢谢楼主
网站页面间脚本传至 sessionStorage

sessionStorage、localStorage详解 webstorage是本地存储,存储在客户端,包括localStorage和sessionStorage。在JavaScript语言中可通过 window.sessionStorage 或 sessionStorage 调用此对象...

小仙女KOMons
2018/07/10
0
0
网站页面间脚本传值 sessionStorage

sessionStorage、localStorage详解 webstorage是本地存储,存储在客户端,包括localStorage和sessionStorage。在JavaScript语言中可通过 window.sessionStorage 或 sessionStorage 调用此对象...

小仙女KOMons
02/20
0
0
前端存储 - localStorage

发布自Kindem的博客,欢迎大家转载,但是要注意注明出处 localStorage 介绍 在HTML5中,引入了两个新的前端存储特性: localStorage sessionStorage 这两者非常相似,都是用来在前端保存一定...

Kindem
2018/07/08
0
0
localStorage 和 sessionStorage 简介

导读 一、 简述 sessionStorage 和 sessionStorage 是 HTML5 新增的两个特性,这两个特性主要是用来作为会话存储和本地存储来使用的,解决了 cookie 存储空间不足的问题; sessionStorage 属...

qianyin925
05/05
0
0
HTML5学习之Web Storage基础知识

HTML5 Web 存储 在HTML5 Web Storage还没出来之前,本地存储使用的是 cookie. 但是Web 存储需要更加的安全与快速,这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可...

CHIEMINCHAN
2018/05/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Guava RateLimiter + AOP注解实现单机限流、统计QPS

1、基于springboot项目pom.xml添加如下依赖: <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-aop</artifactId></dependency><d......

铁骨铮铮
9分钟前
0
0
龙芯版办公软件下载

金山wps office   rpm包:http://ftp.loongnix.org/os/loongnix/1.0/os/Packages/w/wps-office-10.8.0.6472-1.a20p1.mips64el.rpm   deb包:http://packages.deepin.com/loongson/pool/......

gugudu
15分钟前
0
0
BI报表分析和数据可视化,推荐这三个开源工具!

开源篇 一、Superset 1、技术架构:Python + Flask + React + Redux + SQLAlchemy 2、使用人群: (1)开发/分析人员做好看板,业务人员浏览看板数据 (2)业务人员可自行编辑图表,查看满足...

飓风2000
21分钟前
0
0
CountDownLatch

CountDownLatch的概念 CountDownLatch是一个同步工具类,用来协调多个线程之间的同步,或者说起到线程之间的通信(而不是用作互斥的作用)。 CountDownLatch能够使一个线程在等待另外一些线程...

少年已不再年少
30分钟前
0
0
centos7 新手阿里云服务器安装mongodb

简介 MongoDB 是一个基于分布式 文件存储的NoSQL数据库 由C++语言编写,运行稳定,性能高 旨在为 WEB 应用提供可扩展的高性能数据存储解决方案 MongoDB特点 模式自由 :可以把不同结构的文档存...

醉雨
41分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部