ITOO4.1之LocalStorage 本地存储
2015-12-24 11:32
302 查看
昨天在研究考试配置的时候,遇到这样一个问题:我想把配置考试第一步选好的数据存储到缓存里面,然后第四步的时候是绑定考生,需要通过选择的考试科目:
![](https://img-blog.csdn.net/20151223213024384?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
在第四步绑定考生的时候,需要用到缓存里面的课程ID,通过课程ID查询上课班,进行考生绑定。
![](https://img-blog.csdn.net/20151223213105888?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
大家都遇到过,有时候我们需要将数据存储到sessionStorage和LocalStorage中,我们这样做的好处主要有以下两点:
1、缓存数据
2、减少对内存的占用
那么如何将数据存入缓存中呢?
在ITOO4.0中用到的是HTML5 LocalStorage本地存储。也算是一个比较新鲜的东西了。之前只是通过cookies,但是使用cookies缓存的话有一个不好的地方就是太小,也就是4KB左右的样子,个别浏览器支持每个域名为数不多的cookies,远远不能满足开发人员的需求。
下面一张图是本地存储技术的发展历程:
![](https://img-blog.csdn.net/20151223213202717?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
可以看出从cookies到LocalStorage本地存储,中间经历了好几次技术的革新。
我们在使用LocalStorage的时候首先应该先检测以下浏览器是否支持本地缓存。在HTML5中,本地存储包括LocalStorage和sessionStorage,前者是一直存在本地的,后者是伴随着session的,窗口一旦关闭了数据缓存就消失了。二者的使用方法完全相同,只是存储的介质不同而已。
存储数据的方法就是直接给window.localStorage添加一个属性。其读写删除等操作方法很简单,是以键值对[根据一个键值获得对应的一个值]的方式存在。
经常会遇到:将获得的数据转化为Json串存储
还是先来了解一下什么是Json吧。
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于ECMAScript的一个子集。 JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C、C++、C#、Java、JavaScript、Perl、Python等)。这些特性使JSON成为理想的数据交换语言。
易于人阅读和编写,同时也易于机器解析和生成(一般用于提升网络传输速率)。
一般表示:名称/键值
代码示例:
使用LocalStorage存储Json对象
通过上面的代码就可以存储people的Json对象了。
学习小结:
最近一段时间在ITOO4.1的研究过程中,感受最深的就是一定要学会站在巨人的肩膀上。可以回过头来借鉴一下ITOO4.0中的一些技术成果。LocalStorage本地存储在ITOO4.0中的应用,觉得很强悍哦。又学到了新的知识。小编这段时间将继续更新ITOO系列博客哦,欢迎访问!
在第四步绑定考生的时候,需要用到缓存里面的课程ID,通过课程ID查询上课班,进行考生绑定。
大家都遇到过,有时候我们需要将数据存储到sessionStorage和LocalStorage中,我们这样做的好处主要有以下两点:
1、缓存数据
2、减少对内存的占用
那么如何将数据存入缓存中呢?
在ITOO4.0中用到的是HTML5 LocalStorage本地存储。也算是一个比较新鲜的东西了。之前只是通过cookies,但是使用cookies缓存的话有一个不好的地方就是太小,也就是4KB左右的样子,个别浏览器支持每个域名为数不多的cookies,远远不能满足开发人员的需求。
下面一张图是本地存储技术的发展历程:
可以看出从cookies到LocalStorage本地存储,中间经历了好几次技术的革新。
我们在使用LocalStorage的时候首先应该先检测以下浏览器是否支持本地缓存。在HTML5中,本地存储包括LocalStorage和sessionStorage,前者是一直存在本地的,后者是伴随着session的,窗口一旦关闭了数据缓存就消失了。二者的使用方法完全相同,只是存储的介质不同而已。
存储数据的方法就是直接给window.localStorage添加一个属性。其读写删除等操作方法很简单,是以键值对[根据一个键值获得对应的一个值]的方式存在。
<strong><span style="font-size:18px;">设置值: localStorage.name = fkg;//设置name为"fkg" 或者,localStorage.setItem(‘名称’,数据) 修改值: localStorage["name"] = "dyh";//设置name为"dyh"(覆盖上面的值) 获取值: var name = localStorage.getItem("name");//获取name的值 清除值: localStorage.removeItem("name");//清除name的值</span></strong>
经常会遇到:将获得的数据转化为Json串存储
还是先来了解一下什么是Json吧。
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于ECMAScript的一个子集。 JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C、C++、C#、Java、JavaScript、Perl、Python等)。这些特性使JSON成为理想的数据交换语言。
易于人阅读和编写,同时也易于机器解析和生成(一般用于提升网络传输速率)。
一般表示:名称/键值
代码示例:
<strong><span style="font-size:18px;">var people = { "programmers": [{ "firstName": "feng", "lastName": "guigui", "email": "pmaxyt" } }</span></strong>
使用LocalStorage存储Json对象
<strong><span style="font-size:18px;">var people = { pmaxyt:{name:"pmaxyt",age:17}, dyh:{name:"dyh",age:18} }//要存储的JSON对象 people= JSON.stringify(people);//将JSON对象转化成字符串 localStorage.setItem("people ", people);//用localStorage保存转化好的的字符串 var people= localStorage.getItem("people ");//取回students变量 people = JSON.parse(people);//把字符串转换成JSON对象</span></strong>
通过上面的代码就可以存储people的Json对象了。
学习小结:
最近一段时间在ITOO4.1的研究过程中,感受最深的就是一定要学会站在巨人的肩膀上。可以回过头来借鉴一下ITOO4.0中的一些技术成果。LocalStorage本地存储在ITOO4.0中的应用,觉得很强悍哦。又学到了新的知识。小编这段时间将继续更新ITOO系列博客哦,欢迎访问!
相关文章推荐
- 使用 Libki 来管理公共用户访问计算机
- 微型计算机的始祖:Altair 8800
- 通过手机、电脑远程开关机,Windows和linux机手机,电脑相互控制
- 编程界主流脚本编程语言的比较和选择
- 什么是Perl?编程语言Perl详细介绍
- 编程语言里的静态、动态、强类型、弱类型等概念介绍
- 编程趣事:当下流行编程语言的”讨厌”程度排行榜
- php实现用手机关闭计算机(电脑)的方法
- 用IE重起计算机或者关机的示例代码
- 一张图告诉你计算机编程语言的发展历史
- 程序员必看2008编程语言走势解盘
- 计算机科学中32个常用的基础算法
- 不能在本地计算机启动 apache2.2解决方法
- 24种编程语言的Hello World程序
- 256种编程语言大汇总
- 编程语言JavaScript简介
- 学编程选什么语言好?是PHP、Python还是Ruby?
- 编程语言Python的发展史
- python获取本地计算机名字的方法