【html5】html5本地简单存储

html5本地简单存储

HTML5 提供了四种在客户端存储数据的新方法，即 localStorage 、sessionStorage、globalStorage、Web Sql Database。

前面三个适用于存储较少的数据,而Web Sql Database适用于存储大型的，复杂的数据，我习惯把前面的三个称之为小存储。

简单存储与cookie的区别

1.存储量大
①web存储比cookie存储量更大，在数据量上可以达到
5M，而cookie最多也就4KB，或者20个key/value对。
2.安全性高
①cookie在向后台发送每一个http请求的时候都会出现在
http头部，而html5的本地存储则不会，某种程度上讲
是节约了一定的带宽，缩短了请求、响应的时间

localStorage 、sessionStorage、globalStorage之区别

1.localStorage ：
①localStorage 没有时间限制的数据存储，也就是说，
localStorage是永远不会过期的，除非主动删除数据。
数据可跨越多个窗口，无视当前会话，在同一个域中
被共同访问、使用。
2.sessionStorage
①针对一个 session 的数据存储，任何一个页面存储的
信息在窗口中同一域下的页面都可以访问它存储的数
据。每个窗口的值都是独立的，它的数据会因窗口的
关闭而丢失，不同窗口间的sessionStorage是不可以
共享的。
3.globalStorage
①和sessionStorage一样，域中任何一个页面存储的信
息都能被所有的页面共享。目前只有FF支持，且只支
持当前域下的globalStorage存储

localStorage详解

1.localStorage ：
localStorage /sessionStorage都有相同的Api 如
①localStorage.length 获得storage中的个数
②localStorage .key(n) 获得storage中第n个键值对的键
③localStorage.key = value
④localStorage.setItem(key, value) 添加
⑤localStorage.getItem(key)获取
⑥localStorage.removeItem(key) 移除
⑦localStorage.clear() 清除

//添加
localStorage.setItem('name','hhh2');
//获取
var name=localStorage.getItem('name');
//删除
localStorage.removeItem('name')
//清除
localStorage.clear()