首页 > 代码库 > 【html5】html5本地简单存储

【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() 清除

1 //添加2 localStorage.setItem(‘name‘,‘hhh2‘);3 //获取4 var name=localStorage.getItem(‘name‘);5 //删除6 localStorage.removeItem(‘name‘) 7 //清除8 localStorage.clear()