HTMl5的存储方式sessionStorage和localStorage详解


Posted in HTML / CSS onMarch 18, 2014

因此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
HTML / CSS 相关文章推荐
CSS3实现的闪烁跳跃进度条示例(附源码)
Aug 19 HTML / CSS
css3实现的下拉菜单效果示例
Jan 22 HTML / CSS
css3实现的多级渐变下拉菜单导航效果代码
Aug 31 HTML / CSS
CSS3的Flexbox布局的简明入门指南
Apr 08 HTML / CSS
简单整理HTML5的基本特性和语法
Feb 18 HTML / CSS
HTML5实现移动端复制功能
Apr 19 HTML / CSS
移动端html5模拟长按事件的实现方法
Sep 30 HTML / CSS
HTML5 视频播放(video),JavaScript控制视频的实例代码
Oct 08 HTML / CSS
html5移动端自适应布局的实现
Apr 15 HTML / CSS
AmazeUI 单选框和多选框的实现示例
Aug 18 HTML / CSS
web前端之css水平居中代码解析
May 20 HTML / CSS
详解CSS中的特指度和层叠问题
Jul 15 HTML / CSS
HTML5 Notification(桌面提醒)功能使用实例
Mar 17 #HTML / CSS
让IE9以下版本的浏览器兼容HTML5的方法
Mar 12 #HTML / CSS
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
Mar 07 #HTML / CSS
HTML5中新标签和常用标签详解
Mar 07 #HTML / CSS
html5的websockets全双工通信详解学习示例
Feb 26 #HTML / CSS
HTML5+CSS3应用详解
Feb 24 #HTML / CSS
html5中valid、invalid、required的定义
Feb 21 #HTML / CSS
You might like
php include和require的区别深入解析
2013/06/17 PHP
PHP实现无限级分类(不使用递归)
2015/10/22 PHP
jQuery实现表格展开与折叠的方法
2015/05/04 Javascript
JavaScript模拟实现键盘打字效果
2015/06/29 Javascript
第一次接触JS require.js模块化工具
2016/04/17 Javascript
Websocket协议详解及简单实例代码
2016/12/12 Javascript
BootStrap3中模态对话框的使用
2017/01/06 Javascript
高性能的javascript之加载顺序与执行原理篇
2018/01/14 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
2018/04/01 Javascript
Vue组件之单向数据流的解决方法
2018/11/10 Javascript
layui添加动态菜单与选项卡
2019/07/26 Javascript
Vue开发环境中修改端口号的实现方法
2019/08/15 Javascript
基于JQuery实现页面定时弹出广告
2020/05/08 jQuery
全面解析JavaScript Module模式
2020/07/24 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
2020/10/13 Javascript
[58:59]完美世界DOTA2联赛PWL S3 access vs CPG 第一场 12.13
2020/12/16 DOTA
[47:45]DOTA2-DPC中国联赛 正赛 Phoenix vs Dragon BO3 第一场 2月26日
2021/03/11 DOTA
跟老齐学Python之集成开发环境(IDE)
2014/09/12 Python
python Django批量导入不重复数据
2016/03/25 Python
使用Python实现windows下的抓包与解析
2018/01/15 Python
Python unittest单元测试框架总结
2018/09/08 Python
对python实时得到鼠标位置的示例讲解
2018/10/14 Python
django model object序列化实例
2020/03/13 Python
网页中的电话号码如何实现一键直呼效果_附示例
2016/03/15 HTML / CSS
西班牙品牌鞋子、服装和配饰在线商店:Esdemarca
2021/02/17 全球购物
总务岗位职责
2013/11/19 职场文书
捐款倡议书范文
2014/02/02 职场文书
父母对孩子说的话
2014/04/12 职场文书
敬老院院长事迹材料
2014/05/21 职场文书
运输企业安全生产责任书
2014/07/28 职场文书
2015廉洁自律个人总结
2015/02/14 职场文书
建房合同协议书
2016/03/21 职场文书
详解Spring Security中的HttpBasic登录验证模式
2022/03/17 Java/Android
根德5570型九灯四波段立体声收音机是电子管收音机的楷模 ? 再论5570
2022/04/05 无线电
el-form每行显示两列底部按钮居中效果的实现
2022/08/05 HTML / CSS
插件导致ECharts被全量引入的坑示例解析
2022/09/23 Javascript