因此sessionStorage的不是一种持久化的本地存储,仅仅是会话级别的存储。而localStorage的用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。一,网络存储和饼干的区别Web存储的概念和Cookie相似性,区别是它是为了达到更大容量存储设计的。Cookie的大小是重叠的,并且每次您请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外饼干还需要指定作用域,不可以跨域调用。除此之外,网络存储拥有setItem,的getItem,的removeItem,清晰等方法,不像饼干需要前端开发者自己封装setCookie方法,getCookie方法。但是曲奇也是不可以或缺的:Cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在,而Web存储可能要在本地“存储”数据而生(来自@otakustay的解析)二,html5 web storage的浏览器支持情况浏览器的支持除IE7及以下不支持外,其他标准浏览器都完全支持(ie及FF需在web服务器里运行),值得一提的是IE总是办好事,例如IE7,IE6中的UserData实际上就是JavaScript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持Web存储。要判断浏览器是否支持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存储值用途:将值存储到键的范围内:.setItem(key,value)代码示例:

复制代码

代码如下:

sessionStorage.setItem(“ key”,“ value”); localStorage.setItem(“ site”,“ js8.in”);

getItem获取值用途:获取指定密钥本地存储的值的用法:.getItem(key)代码示例:

复制代码

代码如下:

var value = sessionStorage.getItem(“ key”); var site = localStorage.getItem(“ site”);

removeItem删除键用途:删除指定键本地存储的值的用法:.removeItem(key)代码示例:

复制代码

代码如下:
sessionStorage.removeItem(“ key”); localStorage.removeItem(“ site”);
clear清除所有的键/值用途:清除所有的键/值用法:.clear()代码示例:
复制代码
代码如下:
sessionStorage.clear(); localStorage.clear();

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

web Storage不但可以用自身的setItem,getItem等方便访问,也可以像普通对象一样用点(。)操作符,及[]的方式进行数据存储,像如下的代码:

复制代码

代码如下:

var storage = window.localStorage; storage.key1 =“ hello”; storage [“ key2”] =“世界”; console.log(storage.key1); console.log(storage [“ key2”]);

五,localStorage和sessionStorage的密钥和长度属性实现遍历

sessionStorage和localStorage提供的密钥()和长度可以方便地实现存储的数据遍历,例如下面的代码:

复制代码

代码如下:

var storage = window.localStorage; for(var i = 0,len = storage.length; i

六,storage事件

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

复制代码

代码如下:

if(window.addEventListener){ window.addEventListener(“ storage”,handle_storage,false); } else if(window.attachEvent){ window.attachEvent(“ onstorage”,handle_storage); }函数handle_storage(e){ if(!e){e = window.event;} }

storageEvent对象的具体属性如下表:

属性类型描述

键串添加,删除或修改的命名密钥

旧值任何先前的值(现已覆盖);如果添加了新项目,则为null

newValue任何新值;如果添加了项目,则为null

网址/ uri串调用触发此更改的方法的页面