localStorage存储数据

介绍

localStorage：

localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。

sessionStorage：

sessionStorage仅在当前会话下有效，关闭页面或刷新浏览器后被清除。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。源生接口可以接受，亦可再次封装来对Object和Array有更好的支持。

方法

localStorage与sessionStorage具有相同的API，以下方法都可以用于sessionStorage

localStorage存储方法

//以“name”为名称存储一个值“Lee”，这三种设置值方式是一样的；
localStorage.name = "Lee"；
localStorage["name"] = "Lee"；
localStorage.setItem("name","Lee");

localStorage获取值方法

//获取名称为“name”的值，这三种获取值方式是一样的；
var name = localStorage["name"];
var name = localStorage.name;
var name = localStorage.getItem("name");

localStorage清除特定值方法

//清除name的值
localStorage.removeItem("name");
localStorage.name = "";

localStorage清除所有值方法

//清除name的值
 localStorage.clear();

作用域

不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。

实例

localStorage只能存储字符串，如果需要存储对象，首先要转化为字符串。利用JSON.stringify()；然后取出person的对象你可以用JSON.parse();

//存值
var person = {"name":"Lee","sex":"boy","age":30};
localStorage.setItem("person", JSON.stringify(person));
// 值为字符串  '{"name":"Lee","sex":"boy","age":30}';

//取值
person = JSON.parse(localStorage.getItem("person"));

localStorage、sessionStorage共同点：都是保存在浏览器端，且同源的。