sessionStorage和localStorage区别

html5中的Web Storage包括两种存储方式:sessionStorage和localStorage。

localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。他们均只能存储字符串类型的对象。

sessionStorage 用于本地存储一个会话(session)中的数据，这些数据只有在同一个会话中的页面才能访问，并且当会话结束之后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。

localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。

而 localStorage 用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

web storage和cookie的区别

Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可跨域调用。

除此之外，Web storage拥有setItem、getItem、removeItem、clear等方法，不像cookie需要开发者自己封装setCookie，getCookie。

但是Cookie也是不可或缺的，Cookie的作用是与服务器进行交互，作为HTTP规范的一部分存在，而Storage仅仅是为了在本地存储数据而生。

Html5 web storage的浏览器支持情况

浏览器的支持除了IE7及以下不支持外，其他标准浏览器都完全支持。

localStorage和sessionStorage操作

两种存储方式都有相同的操作方法，例如setItem，getItem和removeItem等。

localStorage和sessionStorage的方法

setItem存储value

用途:将value存储到key字段

用法：.setItem(key，value)

示例： sessionStorage.setItem("key","value");

localStorage.setItem("site","js8.in");

getItem获取value

用途:获取指定key本地存储的值

用法：.getItem(key)

示例： var value=sessionStorage.getItem("key");

var site=localStorage.getItem("site");

removeItem删除key

用途:删除key本地存储的值

用法：.removeItem(key)

示例： sessionStorage.removeItem("key");

localStorage.removeItem("site");

clear清除所有的key/value

用途: 清除所有的key/value

用法：.clear

示例： sessionStorage.clear();

localStorage.clear();

其他操作方法：点操作和[]

web Storage不但可以用自身的setItem,getItem等方便存取，也可以像普通对象一样用点(.)操作符，及[]的方式进行数据存储，像如下的代码：

var storage = window.localStorage; storage.key1 = "hello"; storage["key2"] = "world"