HTMl5的存储方式sessionStorage和localStorage详解

所属分类: 网页制作 / html5 阅读数: 766
收藏 0 赞 0 分享
因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。而localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。
一、web storage和cookie的区别
Web Storage的概念和cookie相似,区别是它是为了更大容量存储设计的。Cookie的大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外cookie还需要指定作用域,不可以跨域调用。
除此之外,Web Storage拥有setItem,getItem,removeItem,clear等方法,不像cookie需要前端开发者自己封装setCookie,getCookie。
但是Cookie也是不可以或缺的:Cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在 ,而Web Storage仅仅是为了在本地“存储”数据而生(来自@otakustay 的纠正)
二、html5 web storage的浏览器支持情况
浏览器的支持除了IE7及以下不支持外,其他标准浏览器都完全支持(ie及FF需在web服务器里运行),值得一提的是IE总是办好事,例如IE7、IE6中的UserData其实就是javascript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持web storage。
要判断浏览器是否支持localStorage可以使用下面的代码:

复制代码
代码如下:
if(window.localStorage){
alert("浏览支持localStorage")
}
else
{
alert("浏览暂不支持localStorage")
}
//或者 if(typeof window.localStorage == 'undefined'){ alert("浏览暂不支持localStorage") }

三、localStorage和sessionStorage操作
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";
console.log(storage.key1);
console.log(storage["key2"]);

五、localStorage和sessionStorage的key和length属性实现遍历
sessionStorage和localStorage提供的key()和length可以方便的实现存储的数据遍历,例如下面的代码:

复制代码
代码如下:

var storage = window.localStorage;
for (var i=0, len = storage.length; i < len; i++)
{
var key = storage.key(i);
var value = storage.getItem(key);
console.log(key + "=" + value);
}

六、storage事件
storage还提供了storage事件,当键值改变或者clear的时候,就可以触发storage事件,如下面的代码就添加了一个storage事件改变的监听:

复制代码
代码如下:
if(window.addEventListener){
window.addEventListener("storage",handle_storage,false);
}
else if(window.attachEvent)
{
window.attachEvent("onstorage",handle_storage);
}
function handle_storage(e){
if(!e){e=window.event;}
}

storage事件对象的具体属性如下表:
Property Type Description
key String The named key that was added, removed, or moddified
oldValue Any The previous value(now overwritten), or null if a new item was added
newValue Any The new value, or null if an item was added
url/uri String The page that called the method that triggered this change
更多精彩内容其他人还在看

HTML5的标签的代码的简单介绍 HTML5标签的简介

本文主要介绍了HTML5的标签.不同于以前的标签.更简单.更方便
收藏 0 赞 0 分享

关于HTML5你必须知道的28个新特性,新技巧以及新技术

HTML5有很多的新功能.新代码.非常不错.现在总结一下.仅供参考
收藏 0 赞 0 分享

只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)

用CSS,HTML5打造一个漂亮的标签效果
收藏 0 赞 0 分享

网易微博Web App用HTML5开发的过程介绍

本文介绍了网易微博用HTML5开发的全过程
收藏 0 赞 0 分享

HTML5 对各个标签的定义与规定:body的介绍

本文主要介绍body标签
收藏 0 赞 0 分享

关于HTML5的安全问题开发人员需要牢记的

HTML5中的安全问题也要注意的
收藏 0 赞 0 分享

关于HTML5的22个初级技巧(图文教程)

HTML5来了.让我们看一下有什么技巧
收藏 0 赞 0 分享

开发人员所需要知道的HTML5性能分析面面观

以下这篇文章是由一位名为张黎明的IT技术人员所写,其发表于InfoQ的网页上。这次他在全文里面从9个不同的方面分析HTML5的性能,还是很值得相应的开发人员阅读的。
收藏 0 赞 0 分享

HTML5安全介绍之内容安全策略(CSP)简介

前言:HTML5出现后,网络安全更加受到广泛的关注。Web对于网络安全有哪些改进?我们如何来面对越来越危险的网络欺诈和攻击?下面的文章谈到了W3C对于这个问题的最新解决方案。未来有机会的话,我会针对XSS、P3P、同源策略、CORS(跨域资源共享)和CSP进行关于HTML5内容
收藏 0 赞 0 分享

input元素的url类型和email类型简介

在过去我们制作网页输入框,会用到不少JS验证,如今有了HTML5写这种效果已经没有那么麻烦了,下面我来给大家介绍两种HTML5的input的新增加的类型应用。
收藏 0 赞 0 分享
查看更多