在localStorage中存储对象数组并读取的方法


Posted in Javascript onSeptember 24, 2016

频繁ajax请求导致页面响应变慢。于是考虑将数据存储在window.storage中,这样只请求一次ajax,而不需要频繁请求。

鉴于localstorage中只能存储字符串,所以我们要借助于JSON.stringify()和JSON.parse();

$.ajax({
type: "get",
async: "true",
url: "",
data: {},
dataType: "jsonp",
success: function(data){
if(data instanceof Array){
stroage.push(JSON.stringify(data[i])); //storage是外部定义的数组 storage = []
}
},
error: function(){
}
});

现在,我们将data存储在了storage中,当我们需要使用时:

fucntion getData(){
window.localStorage.job = JSON.stringify(storage); //将storage转变为字符串存储
var job = JSON.parse(window.localStorage.job);
for(var i = 0; i < job.length; i++){
job[i] = JSON.parse(job[i]);
}
//此时job中存储的就是对象数组了
}

本地存储外,除了localStorage,还有sessionStorage.

(1)localStorage和sessionStorage都是用来存储客户端临时信息的对象。

(2)localStorage和sessionStorage都只能存储字符串类型的对象

(3)localStorage生命周期是永久,除非用户手动清除localStorage信息,否则这些信息将永远存在。

(4)sessionStorage生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了,那么通过sessionStorage中存储的数据也就被清空了。

(5)不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的localStorage(页面属于相同域名和端口),但是不同页面或标签页间无法共享sessionStorage的信息。

以上所述是小编给大家介绍的在localStorage中存储对象数组并读取的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Using the TextRange Object
Oct 14 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
Mar 11 Javascript
浅谈webpack 自动刷新与解析
Apr 09 Javascript
详解Vue项目中出现Loading chunk {n} failed问题的解决方法
Sep 14 Javascript
总结4个方面优化Vue项目
Feb 11 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
Apr 17 Javascript
小程序关于请求同步的总结
May 05 Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
Nov 04 Javascript
highcharts.js数据绑定方式代码实例
Nov 13 Javascript
layui清除radio的选中状态实例
Nov 14 Javascript
浅谈JavaScript中的“!!”作用
Aug 03 Javascript
详解Vue中$props、$attrs和$listeners的使用方法
Feb 18 Vue.js
基于JavaScript实现跳转提示页面
Sep 24 #Javascript
JavaScript实现DOM对象选择器
Sep 24 #Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
Sep 23 #Javascript
浅谈Web页面向后台提交数据的方式和选择
Sep 23 #Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
Sep 23 #Javascript
打造自己的jQuery插件入门教程
Sep 23 #Javascript
jQuery.uploadify文件上传组件实例讲解
Sep 23 #Javascript
You might like
windows下开发并编译PHP扩展的方法
2011/03/18 PHP
详解PHP的Yii框架中自带的前端资源包的使用
2016/03/31 PHP
yii2控制器Controller Ajax操作示例
2016/07/23 PHP
jquery选择器-根据多个属性选择示例代码
2013/10/21 Javascript
jQuery随机密码生成的方法
2015/03/09 Javascript
Nodejs从有门道无门菜鸟起飞必看教程
2016/07/20 NodeJs
javascript实现鼠标点击页面 移动DIV
2016/12/02 Javascript
js正则表达式惰性匹配和贪婪匹配用法分析
2016/12/26 Javascript
vue实现树形菜单效果
2018/03/19 Javascript
在Vue中获取组件声明时的name属性方法
2018/09/12 Javascript
解决vue attr取不到属性值的问题
2018/09/18 Javascript
vue 循环加载数据并获取第一条记录的方法
2018/09/26 Javascript
微信小程序登录session的使用
2019/03/17 Javascript
react高阶组件添加和删除props
2019/04/26 Javascript
JS实现多选框的操作
2020/06/24 Javascript
[56:48]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python用Pillow(PIL)进行简单的图像操作方法
2017/07/07 Python
python线程中同步锁详解
2018/04/27 Python
opencv python 傅里叶变换的使用
2018/07/21 Python
python3.4爬虫demo
2019/01/22 Python
使用python画社交网络图实例代码
2019/07/10 Python
Python 3.8 新功能来一波(大部分人都不知道)
2020/03/11 Python
python 利用jieba.analyse进行 关键词提取
2020/12/17 Python
html5使用html2canvas实现浏览器截图的示例
2017/08/31 HTML / CSS
万得城电器土耳其网站:欧洲第一大电子产品零售商
2016/10/07 全球购物
英国异国风情旅游网站:Travel Talk Tours(团体旅游、探险旅游、帆船假期)
2018/07/26 全球购物
维也纳通行证:Vienna PASS
2019/07/18 全球购物
办公室主任主任岗位责任制
2014/02/11 职场文书
幼儿园消防演练方案
2014/02/13 职场文书
菜篮子工程实施方案
2014/03/08 职场文书
终止合同协议书
2014/04/17 职场文书
护林防火标语
2014/06/27 职场文书
2014广电局实施党的群众路线教育实践活动方案思想汇报
2014/09/22 职场文书
监察局领导班子四风问题整改措施思想汇报
2014/10/05 职场文书
24句精辟的现实社会语录,句句扎心,道尽人性
2019/08/29 职场文书
熟背这些句子,让您的英语口语突飞猛进(135句)
2019/09/06 职场文书