您的位置:首页 > Web前端 > HTML5

html5 Web Storage(localStorage(),sessionStorage())

2015-12-20 21:54 507 查看
Web Storage包括了两种存储方式:sessionStorage和localStorage

sessionStorage 是会话级别的存储,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。

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

Web Storage与cookie异同

cookie 支持的数据内容小,8k左右。localStorage目前能支持到10M。

每次请求一个新的页面的时候Cookie都会被发送过去,浪费了带宽。

cookie 需要指定作用域,不可以跨域调用。

Web Storage 拥有setItem,getItem,removeItem,clear等方法,cookie 需要前端开发者自己封装setCookie,getCookie方法。

localStorage浏览器支持情况

<script type="text/javascript">
// method one
if(window.localStorage){
alert("浏览支持localStorage")
}else{
alert("浏览暂不支持localStorage")
}
// method two
if(typeof window.localStorage == 'undefined') {
alert("浏览暂不支持localStorage")
}
</script>


localStorage和sessionStorage操作

localStorage.setItem(key,value)    // 设置键值对

localStorage.getItem(key)     // 通过键值读取对应的值

localStorage.removeItem(key)   // 通过键值移除对应的值

localStorage.clear()       // 初始化localStorage,清除所有键值对

localStorage.key(index)     // 通过下标index来获取指定索引的key名

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

<script type="text/javascript">
var storage = window.localStorage;
storage.key1 = "hello";
storage["key2"] = "world";
console.log(storage.key1);
console.log(storage["key2"]);
</script>


相关:IE专属存储 UserData.
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: