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"