localStorage，sessionStorage的区别和用法

HTML5的WebStorage提供了两种API：localStorage（本地存储）和sessionStorage（会话存储）

localStorage和sessionStorage的区别

1.生命周期

localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。
sessionStorage的生命周期是仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。

2.存储大小

localStorage和sessionStorage的存储数据大小一般都是：5MB

3.存储位置

localStorage和sessionStorage都保存在客户端，不与服务器进行交互通信

4.存储内容类型

localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理

5.获取方式

localStorage：window.localStorage
sessionStorage：window.sessionStorage

6.应用场景

localStorage：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据
sessionStorage：敏感账号一次性登录

存：

    var obj = {"name":"xiaoming","age":"16"}

    localStorage.setItem("userInfo",JSON.stringify(obj));

取：

    var user = JSON.parse(localStorage.getItem("userInfo"))

删除：

    localStorage.remove("userInfo);

清空：

    localStorage.clear();

 

WebStorage提供了一些方法，数据操作比cookie方便

setItem(key, value) —— 保存数据，以键值对的方式存储信息
getItem(key) —— 获取数据，将键值传入，即可获取到对应的value值
removeItem(key) —— 删除单个数据，根据键值移除对应的信息
clear() —— 删除所有的数据
key(index) —— 获取某个索引的key