HTML 5 Web Storage 使用

在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的数据可以在浏览器本地长期存在，即使浏览器关闭了，以后打开浏览器，加载相应的页面后依然能访问到数据。