sessionStorage、localStorage简介

简介

　　技术通常水平有限，有什么错的地方，望你们指正。

　　sessionStorage、localStorage、cookie这三个是咱们在浏览器端用来存储数据的，cookie使用起来较为繁琐之后进行总结，主要介绍一下sessionStorage和localStorage的用法。sessionStorage和localStorage都是在浏览器端用来存储数据的对象，它们也只在浏览器里有做用不会被发送到服务器端。

sessionStorage

　　sessionStorage存活周期就是会话开始直到结束的这段时间，就是从咱们打开一个浏览器窗口到关闭浏览器窗口的这段时间内都是有效的，不管是刷新开始从新打开页面当前的sessionStorage都是有效的。当咱们在打开一个新窗口的时候就会从新再建立一个sessionStorage对象。

　　sessionStorage在咱们打开浏览器是被建立，它只能在当前的域名中有效，从新输入一个网址后就会从新建立一个新的sessionStorage对象，可是只要咱们不关闭当前的窗口咱们在从新输入原网址的时候，原来的sessionStorage仍然是可用的。

　　例如：

　　咱们先打开百度，在console中输入sessionStorage.name = "百度"，而后在地址栏中输入google的网址，咱们发现google里面是没有sessionStorage.name这个属性的，咱们在向url中输入百度的网址，sessionStorage.name仍然是存在的。咱们每打开一个网址就会建立一个sessionStorage对象，而且该sessionStorage对象只在当前的域名内有效，当咱们关闭浏览器时sessionStorage对象就会消亡。

　　sessionStorage是一个对象因此咱们就能够经过"."来建立属性和使用属性例如：

sessionStorage.name = "zt";
sessionStorage.age = 23
sessionStorage.name//zt

　　sessionStorage一样也给咱们提供了几个API来官方了一下咱们的使用，咱们经常使用的就是下面这几个：

　　length：sessionStorage.length返回当前sessionStorage对象下面有几个属性。

　　setItem:sessionStorage.setItem("_key","value")为sessionStorage添加一个属性并赋值，等同与sessionStorage._key = value。

　　setItem：sessionStorage.getItem("_key")获取sessionStorage对象上的key属性的值，等同于sessionStorage._key。

　　removeItem：sessionStorage.removeItem("_key")删除sessionStorage对象上的一个属性，等同于sessionStorage._key = null。

　　clear：sessionStorage.clear()清空sessionStorage上面的全部的属性。

　　sessionStorage.getItem()在一些状况下是不能被替代的,例如咱们经过sessionStorage.setItem("key","isKey"),设置了一个key的属性，而sessionStorage原型上是有一个key方法的,若是咱们sessionStorage.key的话就会去访问key方法，而经过sessionStorage.getItem("key")就能够访问到key属性，可是必定避免咱们存储的属性名和原型上的方法名同名。

　　sessionStorage只能用来存储字符串：

var arr = [1,2,3];
sessionStorage.data = arr;
sessionStorage.data//1,2,3

　　咱们想存储一个数组，虽然存进去了可是当咱们取出来的时候，发现已经面目全非了，若是要把对象存储在sessionStorage上，首先要先对对象进行一个序列化为字符串的操做，使用时在进行反序列化：

var arr = [1,2,3];
sessionStorage.data = JSON.stringify(arr);
JSON.parse(sessionStorage.data)//[1,2,3]

　　一般咱们对sessionStorage的使用就是记录一个表单的信息。好比在填写一个复杂的表单时，用户可能会不经意间刷新了网页，这样填写的信息就白填了，一般咱们利用sessionStorage来存储用户填写的信息，当用户发送表单后咱们在清空信息，这样即便用户刷新了浏览器也能够保留住刚刚填写的信息。

localStorage

　　localStorage在API上的使用上和sessionStorage是一致的。不一样之处在于，localStorage不会消亡，只要建立了而且咱们没有手动销毁（或者清除浏览器历史）就会一直存在于咱们的浏览器中。每个域名都会建立一个localStorage，当前域名只能访问本身的localStorage。localStorage是一直存在于本地的因此咱们利用的较为多一些，最近在的项目中用了一次，就是保存用户对一个报表的排序设置，这样每次页面加载的时候从localStorage读取用户的配置，发送到服务器，按照这个顺序返回数据。博客园在写博文时候的自动保存也是利用的localStorage，灵活使用localStorage能够给用户带来极大的便利。