巧用sessionStorage判断页面是关闭还是刷新
07:40 , 已有8174次阅读
自从有了h5之后，以前我们很多很难实现的功能，现在都可以轻松的就解决了。譬如今天我要给大家分享的这个小技巧，就是利用了h5的新功能sessionStorage。
比如类似这样一个需求：记住用户最后一次访问系统的地址，然后当用户下次在进入系统的时候，需求直接进入最后一次访问的页面？
可能大家会有很多种方式可以实现,但是我今天给大家分享的一个纯前端的实现。
全部代码也就这么几行，其中用到两个新特性sessionStorage和localStorage。
localStorage用来存储用户最后访问的url，sessionStorage的变量用来判断用户当前行为是新进系统，还是只是刷新页面。
if(sessionStorage.opened){
console.log('窗口是刷新页面,不是新打开')
console.log('窗口是新打开')
//如果获取到历史url,则重定向到历史地址
if(localStorage.history && localStorage.history != window.location.href ){
window.location.replace(localStorage.history);
sessionStorage.setItem('opened','true');
localStorage.setItem('history',location.href);有关localStorage和sessionStorage的特性。
localStorage本身带有方法有
　　添加键值对：localStorage.setItem(key,value)，如果key存在时，更新value。
　　获取键值：localStorage.getItem(key)，如果key不存在返回null。
　　删除键值对：localStorage.removeItem(key)。key对应的数据将会全部删除。
　　清除所有键值对：localStorage.clear()。如果调用clear()方法，清空localStorage中所有信息，那么key、oldValue和newValue都会被设置为null。
　　获取localStorage的属性名称（键名称）：localStorage.key(index)。
& & &还有一个和普通对象不一样的属性length:
　　获取localStorage中保存的键值对的数量：localStorage.length。
　　下面这个例子用来获取localStorage的键值对
for(var i=0;i&localStorage.i++){
console.log(localStorage.key(i)+ " : " + localStorage.getItem(localStorage.key(i)));
1、存储格式
localStorage对象的键和值只能是字符串，假设我们要保存一个对象到localStorage中，可以使用拼接的方式。当然也可以借助JSON类，将对象转换成字符串保存，然后在取出来的时候将json字符串转换成真正可用的json对象格式
存储JSON格式数据
JSON.stringify(data) 将一个对象转换成JSON格式的数据串,返回转换后的串JSON.parse(data) 将数据解析成对象，返回解析后的对象
（虽然规范中可以存储其他原生类型的对象，但是目前为止没有浏览器对其进行实现）。
2、生命周期
在数据存储的时效性上，localStorage并不会像cookie那样可以设置数据存活的时限。也就是说，只要用户不主动删除，localStorage存储的数据将会永久存在。
sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。
3、存储位置
当然，对于localStorage数据的存储，是存在于本地的文件系统中的，例如，对于chrome来说，localStorage数据的存储位置是在：C:\Users\{userName}\AppData\Local\Google\Chrome\User Data\Default\Local Storage中。对于其他4大浏览器，大家可以自行查找进行查看。
4、数据共享
不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。
可以看到，除IE外的其他浏览器很早的版本都支持了，对于IE低版本系列的浏览器，我们需要一个兼容方案来处理。
微软在IE5.0以后，自定义了一种持久化用户数据的概念userData，这种存储方式只有IE浏览器自己支持。来看看其如何操作——
(function(win) {
// 对于IE，且不支持localStorage的浏览器
// 即针对IE6/7
if ( typeof win.attachEvent != "undefined" && typeof win.localStorage == "undefined") {
var localFileName = "_simulateLocalStorage",
expires = 365,
formField =
// 设置有效期为365天
var expire = new Date();
expire.setDate(expires + expire.getDate());
formField = document.createElement("input");
formField.type = "hidden";
formField.addBehavior('#default#userData');
document.body.appendChild(formField);
var storage = {
setItem : function(key, value) {
formField.load(localFileName);
formField.setAttribute(key, value);
formField.save(localFileName);
getItem : function(key) {
formField.load(localFileName);
return formField.getAttribute(key);
removeItem : function(key) {
formField.load(localFileName);
formField.removeAttribute(key);
formField.save(localFileName);
clear : function() {
formField.load(localFileName);
var d = new Date();
d.setDate(d.getDate() - 1);
formField.expires = d.toUTCString();
formField.save(localFileName);
win["localStorage"] =
})(window);
这里仅仅是对IE兼容性的简单包装，下面的链接给出非常完善的针对localStorage兼容性的解决方案。
6、存储大小
对于HTML5的localStorage而言，其大小支持为5M（当然，各浏览器的大小差异还是有的）。对于IE的userData，用户数据的每个域最大为64KB。
7、应用场景
建议不要使用localStorage方式存储敏感信息，哪怕这些信息进行过加密。另外，对身份验证数据使用localStorage进行存储还不太成熟。我们知道，通常可以通过xss漏洞来获取到Cookie，然后用这个Cookie进行身份验证登录，但是浏览器可以通过HttpOnly来保护Cookie不被XSS攻击获取到。而localStorage存储没有对XSS攻击有任何防御机制，一旦出现XSS漏洞，那么存储在localStorage里的数据就极易被获取到。
storage事件：当存储的storage数据发生变化时都会触发它，但是它不同于click类的事件会冒泡和能取消，storage改变的时候，触发这个事件会调用所有同域下其他窗口的storage事件，不过它本身触发storage即当前窗口是不会触发这个事件的（当然ie这个特例除外，它包含自己本事也会触发storage事件）。
在使用 Storage 进行存取操作的同时，如果需要对存取操作进行监听，可以使用 HTML5 Web Storage api 内置的事件监听器对数据进行监控。只要 Storage 存储的数据有任何变动，Storage 监听器都能捕获。
interface Storage : Event{
readonly attribute DOMS
readonly attribute DOMString? oldV
readonly attribute DOMString? newV
readonly attribute DOMS
readonly attribute Storage? storageA
void initStorageEvent(in DOMString typeArg,
in boolean canBubbleArg,
in boolean cancelableArg,
in DOMString keyArg,
in DOMString oldValueArg,
in DOMString newValueArg,
in DOMString urlArg,
in Storage storageAreaArg);
不难看出其中包含以下属性：
key 属性表示存储中的键名
oldValue 属性表示数据更新前的键值，newValue 属性表示数据更新后的键值。如果数据为新添加的，则 oldValue 属性值为 null。如果数据通过 removeItem 被删除，则 newValue 属性值为 null 。如果 Storage 调用的是 clear 方法，则事件中的 key 、oldValue 、newValue 都是为 null
url 属性记录 Storage 时间发生时的源地址
StorageArea 属性指向事件监听对应的 Storage 对象
Storage 事件可以使用 W3C 标准的注册事件方法 addEventListenter 进行注册监听。例如：
window.addEventlistener("storage",showStorageEvent,false);
function showStorageEvent(e){
console.log(e)
页面a下，有个input框用来存储store，它自身绑定了storage事件，这个时候写入新的数据点击保存，这时新的sotre数据保存了，但是页面a的storage事件没触发，
而页面b下，绑定的storage事件则触发了。（ps：前提页面a和b在同域下，并都是打开状态不同窗口）；
页面a代码：
&!DOCTYPE html&
&meta charset="utf-8"&
&title&&/title&
&input type="text" placeholder="input date to save"&
&button&save&/button&
(function(D){
var val = D.getElementsByTagName("input")[0],
btn = D.getElementsByTagName("button")[0];
btn.onclick = function(){
var value = val.
if(!value)
localStorage.setItem("key", val.value);
window.addEventListener("storage", function(e){
console.log(e);
})(document);
页面b代码：
&!DOCTYPE html&
&meta charset="utf-8"&
&title&&/title&
window.addEventListener("storage", function(e){
console.log(e);
document.write("oldValue: "+ e.oldValue + " newValue:" + e.newValue)
看到这里是不是很疑惑那storage事件到底有什么用，多窗口间多通信用到它就是最好选择了，比如某块公用内容区域基础数据部分都是从store中提取的，这个区域中大多数页面中都有，当用户打开多个页面时，在其中一个页面做了数据修改，那其他页面同步更新是不是很方便（当前页面就要用其他方式处理了），当然用于窗口间通信它作用不仅仅如此，更多的大家可以利用它特性去发挥。
在上面的demo页面b中storage的events对象的属性常用的如下：&
&oldValue：更新前的值。如果该键为新增加，则这个属性为null。&
&newValue：更新后的值。如果该键被删除，则这个属性为null。
&url：原始触发storage事件的那个网页的网址。&
&key：存储store的key名；
1&/jinguangguo/p/4083919.html
2&&http://blog.csdn.net/nx8823520/article/details/
阅读(...) 评论()HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
作者：佚名
字体：[ ] 来源：互联网 时间：05-08 10:58:18
这篇文章主要介绍了HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等,需要的朋友可以参考下
HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的，区别在于 sessionStorage 在关闭页面后即被清空，而 localStorage 则会一直保存。我们这里以 localStorage 为例，简要介绍下 HTML5 的本地存储，并针对如遍历等常见问题作一些示例说明。 localStorage 是 HTML5 本地存储的 API，使用键值对的方式进行存取数据，存取的数据只能是字符串。不同浏览器对该 API 支持情况有所差异，如使用方法、最大存储空间等。
一、localStorage API 基本使用方法
localStorage API 使用方法简单易懂，如下为常见的 API 操作及示例： 设置数据：localStorage.setItem(key,value); 示例：代码如下:for(var i=0; i&10; i++){ localStorage.setItem(i,i);}获取数据：localStorage.getItem(key) 获取全部数据：localStorage.valueOf() 示例：代码如下:for(var i=0; i&10; i++){ localStorage.getItem(i);}删除数据：localStorage.removeItem(key) 示例：代码如下:for(var i=0; i&5; i++){ localStorage.removeItem(i);}清空全部数据：localStorage.clear() 获取本地存储数据数量：localStorage.length 获取第 N 个数据的 key 键值：localStorage.key(N)
2. 遍历 key 键值方法代码如下:for(var i=localStorage.length - 1 ; i &=0; i--){ console.log('第'+ (i+1) +'条数据的键值为：' + localStorage.key(i) +'，数据为：' + localStorage.getItem(localStorage.key(i)));}
3. 存储大小限制测试及异常处理
3.1 数据存储大小限制测试
不同浏览器对 HTML5 的本地存储大小基本均有限制，一个测试的结果如下：代码如下:IE 9
& 4999995 + 5 = 5000000firefox 22.0 & 5242875 + 5 = 5242880chrome
& 2621435 + 5 = 2621440safari
& 2621435 + 5 = 2621440opera
12.15 & 5M （超出则会弹出允许请求更多空间的对话框）
测试代码参考：
代码如下:&!DOCTYPE html&&html&&head&&script& function log( msg ) {
console.log(msg);
alert(msg); }&/p&
&p& var half = '1'; //这里会换成中文再跑一遍 var str = while ( 1 ) {
localStorage.clear();
localStorage.setItem( 'cache', str );
} catch ( ex ) {
} } var base = str. var off = base / 2; var isLeft = 1; while ( off ) {
if ( isLeft ) {
end = base - (off / 2);
end = base + (off / 2);
sstr = str.slice( 0, end );
localStorage.clear();
localStorage.setItem( 'cache', sstr );
limit = sstr.
isLeft = 0;
} catch ( e ) {
isLeft = 1;
off = Math.floor( off / 2 ); }&/p&
&p& log( 'limit: ' + limit );&/script&&/html&
3.2 数据存储异常处理
代码如下:try{ localStorage.setItem(key,value);}catch(oException){ if(oException.name == 'QuotaExceededError'){
console.log('超出本地存储限额！');
//如果历史信息不重要了，可清空后再设置
localStorage.clear();
localStorage.setItem(key,value); }}
大家感兴趣的内容
12345678910
最近更新的内容}