sessionStorage详解

一、前言

sessionStorage 是HTML5新增的一个临时会话存储对象，用于临时保存同一窗口(或标签页)的数据，当关闭当前窗口或浏览器时会自动删除所存储内容。

二、特点

  1. 数据时效性：页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话，直到关闭对应浏览器标签或窗口才会清除；
  2. 页面共享：在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文（重点，下面会讲解）；
  3. 独立性：打开多个相同的 URL 的 Tabs 页面，会创建各自的 sessionStorage；
  4. 存储方式：采用key、value的方式。value的值必须为字符串类型；
  5. 存储限制：不同浏览器限制不同，主流浏览器限制是5MB；

注意：浏览器最小支持版本：IE8、Chrome 5

三、属性与方法

// 获取sessionStorage长度（只读属性）
sessionStorage.length;  
// 通过key存储值
sessionStorage[key] = value;  
// 存储值
sessionStorage.setItem(key, value);
// 直接通过key查找值
sessionStorage[key];
// 查找值
sessionStorage.getItem(key);
// 删除值
sessionStorage.removeItem(key);
// 清空
sessionStorage.clear();
// 获取指定key值，查询不到返回null
sessionStorage.key(index);
// 可通过此方法获取所有储存key值
Object.keys(sessionStorage);

四、场景介绍

sessionStorage 主要适用于现在流行的单页应用程序，可以方便在各模块进行传值。

4.1 页面共享

在sessionStorage的特点中页面共享比较难理解，下面我们详细讲解一下：

首先我们再来看一下这个特点的描述在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文。翻译成实例就是有一个当前页面A，在A页面跳转到B页面（B页面与A页面必须满足同源策略）；此时A页面的sessionStorage信息会复制一份传递给B页面（ 深层复制 ），此时两个页面都有相同sessionStorage信息但互不干扰。

总结：在某些特定场景下新开的页面会复制之前页面的sessionStorage！但不是每个窗口的sessionStorage都可以共享数据！！！

4.2 引用类型数据存储

通过上面的介绍我们了解到sessionStorage只接受存储string类型数据，但是根据业务需求我们进行页面通行时需要传递的数据类型大多是数组、或是对象；

此时就需要使用JSON.stringify(value)将数据转换为string类型，在使用时通过JSON.parse(value)转换回来;

注意：如果要转换的对象的属性是undefined，函数时会被过滤掉，数组中遇到undefined或转换成null。