在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 相关文章推荐
最佳的addEvent事件绑定是怎样诞生的
Oct 24 Javascript
Ext JS 4官方文档之三 -- 类体系概述与实践
Dec 16 Javascript
JavaScript中的null和undefined区别介绍
Jan 01 Javascript
jQuery仿IOS弹出框插件
Feb 18 Javascript
基于JavaScript实现图片连播和联级菜单实例代码
Jul 28 Javascript
详谈js对url进行编码和解码(三种方式的区别)
Aug 16 Javascript
基于canvas粒子系统的构建详解
Aug 31 Javascript
JS写谷歌浏览器chrome的外挂实例
Jan 11 Javascript
深入浅析Node环境和浏览器的区别
Aug 14 Javascript
layui框架table 数据表格的方法级渲染详解
Aug 19 Javascript
JavaScript实现省份城市的三级联动
Feb 11 Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
Aug 07 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
定制404错误页面,并发信给管理员的程序
2006/10/09 PHP
php正则取img标记中任意属性(正则替换去掉或改变图片img标记中的任意属性)
2013/08/13 PHP
php实现zip文件解压操作
2015/11/03 PHP
PHP Cli 模式设置进程名称的方法
2019/06/12 PHP
PHP创建XML的方法示例【基于DOMDocument类及SimpleXMLElement类】
2019/09/10 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
Javascript的构造函数和constructor属性
2010/01/09 Javascript
js写的方法实现上传图片之后查看大图
2014/03/05 Javascript
JavaScript模块随意拖动示例代码
2014/05/27 Javascript
Bootstrap选项卡动态切换效果
2016/11/28 Javascript
微信小程序 input输入框详解及简单实例
2017/01/10 Javascript
Vue shopCart 组件开发详解
2018/01/26 Javascript
原生javascript AJAX 三级联动的实现代码
2018/05/04 Javascript
JS高级技巧(简洁版)
2018/07/29 Javascript
微信小程序下拉框功能的实例代码
2018/11/06 Javascript
Vue实现固定定位图标滑动隐藏效果
2019/05/30 Javascript
node.js中module模块的功能理解与用法实例分析
2020/02/14 Javascript
vue-router 2.0 跳转之router.push()用法说明
2020/08/12 Javascript
可拖拽组件slider.js使用方法详解
2020/12/04 Javascript
[48:48]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python运行的17个时新手常见错误小结
2012/08/07 Python
Python编程实现生成特定范围内不重复多个随机数的2种方法
2017/04/14 Python
pandas 取出表中一列数据所有的值并转换为array类型的方法
2018/04/11 Python
PyQt5中QTableWidget如何弹出菜单的示例代码
2020/02/23 Python
使用sublime text3搭建Python编辑环境的实现
2021/01/12 Python
Python实现微信表情包炸群功能
2021/01/28 Python
CSS3实现的闪烁跳跃进度条示例(附源码)
2013/08/19 HTML / CSS
HTML5制作3D爱心动画教程 献给女友浪漫的礼物
2014/11/05 HTML / CSS
html5 http的轮询和Websocket原理
2018/10/19 HTML / CSS
英国女装网上商店:I Saw It First
2018/10/18 全球购物
新护士岗前培训制度
2014/02/02 职场文书
市场推广策划方案
2014/06/02 职场文书
村官个人总结范文
2015/03/03 职场文书
Python实战之实现简易的学生选课系统
2021/05/25 Python
斗罗大陆八大特殊魂兽,龙族始祖排榜首,第五最残忍(翠魔鸟)
2022/03/18 国漫
Spring boot admin 服务监控利器详解
2022/08/05 Java/Android