ITOO4.1之LocalStorage 本地存储

    昨天在研究考试配置的时候，遇到这样一个问题：我想把配置考试第一步选好的数据存储到缓存里面，然后第四步的时候是绑定考生，需要通过选择的考试科目:

 

在第四步绑定考生的时候，需要用到缓存里面的课程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系列博客哦，欢迎访问！