浅析localStorage跟sessionStorage

浅析localStorage和sessionStorage

localStorage和sessionStorage是属于HTML5中的web存储机制，用于客户端存储数据的方法。为了解localStorage和sessionStorage的相同之处及差异，万万君找出枕头下面的《javascript高级程序设计》一书翻阅查找配合网上资料和写demo例子，终究是了解了两者的区别。

首先我们来看两组demo图片

组图1: 为sessionStorage方法写的demo，左图为第一次打开页面，右图为关闭后再次打开的页面

组图2: 为localStorage方法写的demo，左图为第一次打开页面，右图为关闭后再次打开的页面

浅析localStorage跟sessionStorage

通过上面两组图，小伙伴们发现了什么？没错，用localStorage方法存储的值在关闭页面再次打开后直接读取，还可以读取到之前保存的数值。而用sessionStorage方法存储的值在关闭页面后再次打开读取却读取不到。

这里就是两者最明显的区别之处，在《javascript高级程序设计》一书中是这样给两者定义的：

sessionStorage：sessionStorage对象存储特定于某个会话的数据，也就是该数据只保持到浏览器关闭。（也就是说，通过sessionStorage存储的数据在浏览器关闭后就消失了。）

localStorage：localStorage对象作为持久保存客户端数据，没有时间限制存储数据。（也就是说，通过localStorage存储的数据可以一直保存。只要不主动删除，它可以一直存在。）

接下来我们来看看两者是如何存储、获取、删除数据的吧。

Storage类型：Storage类型提供最大的存储空间来存储名值对。Storage的实例有如下方法：

setItem(name,value)：为指定的name设置一个对应的值；

getItem(name)：获取指定的name的值；

removeItem(name)：删除指定的name的名值对；

clear()：删除所有的名值对；

key(index)：获取位于index位置处的值的name。

上述方法通用与sessionStorage和localStorage中，例如:

<script>
    //存储数据
    sessionStorage.setItem('name','万万君');
    //读取数据
    var name = sessionStorage.getItem('name');
</script>

出了上述运用Storage的实例方法的用法，还可以使用'.'属性的方式来存储、读取，如下：

<script>
	//存储数据
	sessionStorage.name = '万万君';
	//读取数据
	var name = sessionStorage.name;
</script>

浅析localStorage跟sessionStorage

相关推荐