sessionStoragelocalStorage简介

Posted 2020-08-17 張暁磊

简介

　　技术一般水平有限，有什么错的地方，望大家指正。

　　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可以给用户带来极大的便利。