在html中，可以使用 Web Storage API 来保存数据在浏览器客户端，这样可以避免重复从服务器加载数据。
有两种API, sessionStorage 和 localStorage ，它们都是window的对象。
这两个对象的使用方式完全一样，只是作用范围和保存的数据的生命周期有区别。下面我们来具体介绍：
一、使用方式
因为localStorage和sessionStorage的使用方式完全一样，所以下面的使用举例我们都是以sessionStorage来举例。
sessionStorage中的数据存储方式是 key -value的方式，要求key和value都是字符串类型，虽然有些浏览器对于value支持别的数据类型，但目前的大部分浏览器还只支持字符串类型。 可以把它们想象中一个map对象。
1、保存和获取数据
sessionStorage["key1"] = value1;
通过这种下标的方式可以添加一对key-value值（如果key已经存在，则是修改）；
var data = sessionStorage["key1"];
通过这种方式是获取key对应的value值。
除了用下标方式，还可以用对象的方法 setItem(key,value) 和 getItem(key) 来设置和获取值。
2、清除值
清除单个key-value对，可以用对象的方法 removeItem(key)
清除对象中的所有数据可以用对象的方法 clear()
注意： 不能用 sessionStorage["key1"] = "" 或 sessionStorage["key1"]=undefined；
这种方式sessionStorage对象会把双引号或undefined 当作字符串来处理，不仅达不到预期的结果，还会造成问题。
二、如何处理json对象
在js中， 最常用的就是json对象，可sessionStorage中只能保存字符串，操作起来比较麻烦。我们可以转换下思路。
存储时，利用JSON.stringify(json对象) 这个内置的api将一个要保存的json对象转换为字符串存到sessionStorage中。
需要使用时，用 JSON.parse(字符窜) 这个Api将从sessionStorage取到的字符串值转换成json对象进行处理，处理后再转为字符串进行保存。
三、sessionStorage 和 localStorage的区别
1、两者的作用范围不同
1）sessionStorage 保存的数据只能被浏览器的同一个浏览器窗口（或同一个浏览器tab页）访问。
比如某个页面往sessionStorage存储了数据，该窗口加载了另一个页面（必须是和前面页面同源的），则另一个页面也能访问到该数据。
但如果打开一个新的浏览器窗口（或新的浏览器tab页），在其中加载的页面无法访问其它窗口通过sessionStorage存储的数据。
2）而localStorage中存储的数据可以被不同的浏览器窗口（或tab页)中的页面中的js访问，当然前提这些页面必须是同源的。
2、两者的声明周期不同
1）sessionStorage 只对当前窗口有效，一旦当前窗口关闭，则数据会消失。
但时需要注意的是，如果浏览器窗口不是正常关闭的，而是异常关闭的，当浏览器自动恢复窗口时，也许数据还在。
2）localStorage的数据可以在浏览器本地长期存在，即使浏览器关闭了，以后打开浏览器，加载相应的页面后依然能访问到数据。