在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 相关文章推荐
jQuery.validate 常用方法及需要注意的问题
Mar 20 Javascript
关于Javascript加载执行优化的研究报告
Dec 16 Javascript
jquery简单实现幻灯片的方法
Aug 03 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
Sep 07 Javascript
jQuery实用技巧必备(中)
Nov 03 Javascript
跟我学习javascript的undefined与null
Nov 17 Javascript
js+html5实现侧滑页面效果
Jul 15 Javascript
浅谈Node.js 沙箱环境
May 15 Javascript
深入浅析Vue中的 computed 和 watch
Jun 06 Javascript
vue init webpack 建vue项目报错的解决方法
Sep 29 Javascript
Next.js项目实战踩坑指南(笔记)
Nov 29 Javascript
js实现批量删除功能
Aug 27 Javascript
基于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
PHP中文件上传的一个问题
2010/09/04 PHP
PHP中英混合字符串截取函数代码
2011/07/17 PHP
php实现统计邮件大小的方法
2013/08/06 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
用JavaScrpt实现文件夹简单轻松加密的实现方法图文
2008/09/08 Javascript
Jquery实现网页跳转或用命令打开指定网页的解决方法
2013/07/09 Javascript
Node.js中对通用模块的封装方法
2014/06/06 Javascript
JavaScript实现广告的关闭与显示效果实例
2015/07/02 Javascript
全面解析Bootstrap弹窗的实现方法
2015/12/01 Javascript
Ionic默认的Tabs模板使用实例
2016/08/29 Javascript
对vue.js中this.$emit的深入理解
2018/02/23 Javascript
详解小程序如何避免多次点击,重复触发事件
2019/04/08 Javascript
mpvue性能优化实战技巧(小结)
2019/04/17 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
2019/04/22 Javascript
ES6学习笔记之let与const用法实例分析
2020/01/22 Javascript
js 计算月/周的第一天和最后一天代码
2020/02/01 Javascript
在Vue.js中使用TypeScript的方法
2020/03/19 Javascript
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
2020/08/20 Javascript
如何使用 vue-cli 创建模板项目
2020/11/19 Vue.js
详解Python map函数及Python map()函数的用法
2017/11/16 Python
python3 判断列表是一个空列表的方法
2018/05/04 Python
Python实现的银行系统模拟程序完整案例
2019/04/12 Python
Python 使用PyQt5 完成选择文件或目录的对话框方法
2019/06/27 Python
python基于opencv检测程序运行效率
2019/12/28 Python
pyinstaller 3.6版本通过pip安装失败的解决办法(推荐)
2020/01/18 Python
Python将二维列表list的数据输出(TXT,Excel)
2020/04/23 Python
pandas.DataFrame.drop_duplicates 用法介绍
2020/07/06 Python
Python3+RIDE+RobotFramework自动化测试框架搭建过程详解
2020/09/23 Python
python 实现简单的计算器(gui界面)
2020/11/11 Python
李维斯德国官方网上商店:Levi’s德国
2016/09/10 全球购物
如何通过 CSS 写出火焰效果
2021/03/24 HTML / CSS
大学生毕业自我评价范文分享
2013/11/07 职场文书
初入社会应届生求职信
2013/11/18 职场文书
大学生思想汇报范文
2013/12/31 职场文书
远程教育心得体会
2014/01/03 职场文书
深入开展党的群众路线教育实践活动心得体会
2014/11/05 职场文书