最近央视播出了中国诗词大赛,看到了一首诗,送给大家

《春宵·春宵一刻值千金》

作者:苏轼 【宋代】

春宵一刻值千金,花有清香月有阴。

歌管楼台声细细,秋千院落夜沉沉。

好了,言归正传,今天在项目中为了性能问题,打算用本地存储来保存网页的状态,h5中推出两个非常强大的API---sessionStorage和localStorage,经实际检测发现可以兼容到IE8,但是IE还有自己的本地存储方案--UserDataStorage,可以兼容到IE5。可能有人会问,为什么不用cookie,前面说到了性能的问题,cookie的作用域在指定的路径以及它的子路径都有效,并且会附加到请求中,这会发送很多不必要的数据。

于是写了以下兼容所有浏览器的代码,那么问题来了,先遇到了IE不能识别自己的load()方法,然后又遇到了手机浏览器的问题,下面将会细说。

var storageObj = window.sessionStorage || ( window.UserDataStorage && new UserDataStorage() )|| new cookieStorage();

其中cookieStorage.js文件如下,cookie没有对应的API,为了和sessionStorage对象使用相同的方法,需要进行封装。

function cookieStorage( path, maxage ){

	var cookie = ( function(){

		var cookie =  {};
var all = document.cookie; if ( all === '' ) { return cookie; } var list = all.split( '; ' );
for( var i = 0; i < list.length; i++ ){ var tmp = list[i];
var p = tmp.indexOf( '=' );
var name = tmp.substring( 0, p );
var value = tmp.substring( p + 1 );
value = decodeURIComponent( value );
cookie[name] = value; } return cookie; }() ); var keys = [];
for( var key in cookie ){ keys.push( key ); } this.length = keys.length; this.key = function( n ){ if( n < 0 || n >= keys.length ){ return null; } return keys[n]; }; this.getItem = function( name ){ return cookie[name] || null; }; this.setItem = function( key, value ){ if ( !( key in cookie ) ) { keys.push( key );
this.length++;
} cookie[key] = value; var tmp = key + '=' + encodeURIComponent( value );
if ( maxage ) { tmp += '; max-age=' + maxage; }
if ( path ) { tmp += '; path=' + path; } document.cookie = tmp; }; this.removeItem = function( key ){ if ( !( key in cookie ) ) { return ; } delete cookie[key]; for( var i = 0; i < keys.length; i++ ){ if ( keys[i] === key ) { keys.splice( i, 1 );
break; }
} this.length--;
document.cookie = key + '=; max-age=0'; }; this.clear = function(){ for( var i = 0; i < keys.length; i++ ){ document.cookie = keys[i] + '=; max-age=0'; } cookie = {};
keys = [];
this.length = 0; }; }

注意:document.cookie = tmp相当于add函数,并不是重置cookie

其中userDataStorage.js,同cookie一样也需要封装,具体的使用方法请查看IE文档,先贴代码如下:

function UserDataStorage( maxage ){

	var memory = document.createElement( 'div' );
memory.style.display = 'none';
memory.style.behavior = 'url("#default#userData")';
document.body.appendChild( memory ); if ( maxage ) { var now = new Date().getTime();
var expires = now + maxage * 1000 ;
memory.expires = new Date( expires ).toUTCString(); } memory.load( 'MyDataStorage' ); this.getItem = function( key ){ return memory.getAttribute( key ) || null;
}; this.setItem = function( key, value ){ memory.setAttribute( key, value );
memory.save( 'MyDataStorage' ); }; this.removeItem = function( key ){ memory.removeAttribute( key );
memory.save( 'MyDataStorage' );
}; }

问题来了

第一,userDataStroage仅适用于IE,所以为了性能加入以下代码

<!--[if IE]>
<script src="/userDataStorage.js"></script>
<![endif]-->

经浏览器查看,这句代码在IE10和IE11中起到了反作用,就像其他浏览器一样,userDataStorage.js被过滤了,晕,这不是IE才执行的代码? IE10和IE11不是IE?????

但是IE9及以下能够加载,在网上查了一下可以添加<meta http-equiv="X-UA-Compatible"
content="IE=9">指定IE9模式来解析。但是这样就不能用IE10的新特性了。

其次,IE的UserDataStorage需要用到.load()来加载数据,但是亲测在IE8和IE9中不能识别这个函数,打断点发现新建的标签根本没有这个方法。

我的天啊,这是神马鬼。

然后老老实实的用cookie来做不兼容sessionStorage的备选方案,但在使用的时候发现出现两个同名但不同值的cookie(如下图),我和我的小伙伴都惊呆了,后来才发现,是没有设置路径,cookie默认是用当前文档的路径来做路径的,默认失效时间是session时间,路径不同则cookie也不同,即使名称一样。在不指定路径的情况下,两个不同路径的文件设同名的cookie就会出现以上情况,具体的路径的设置和时间设置以及作用域就不多说了,可参考其他文档。

顺便说下在google中查看cookie的两种方法

1、在浏览器的地址栏头部点击那个感叹号,可以查看到详细的路径信息

2、在控制台看,路径信息被遮挡了,只能看到部分

于是我设置了统一的路径,这样就不会出现同名的cookie了,新值只会覆盖旧值。

var Storage =  window.sessionStorage || new cookieStorage( '/cgi-bin/luci/' );

你以为这就搞定了吧,问题又出现了,在手机360浏览器,经检测是支持sessionStorage的,但是发现当设了sessionStorage后,跳转页面,sessionStorage作用域变了,获取不到原来设的那个sessionStorage的值了,值为null,郁闷,但是在其他手机浏览器是好的,还有就是在手机浏览器无痕模式下,也会失效,最后为了兼容只能采用cookie的方案了,如果你的项目要求兼容的浏览器不那么严格的话,可以尝试以上方案。至于无痕模式的解决方案还在探索中,以后会发出来。

总结,做个前端真不容易啊!一堆堆的坑等着你跳。

sessionStorage,UserDataStorage,cookie全兼容写法存在的问题的更多相关文章

  1. sessionStorage & localStorage & cookie

    sessionStorage & localStorage & cookie 概念 html5中的Web Storage包括了两种存储方式:sessionStorage和localSt ...

  2. localStorage sessionStorage 和cookie等前端存储方式总结

    localStorage sessionStorage 和cookie localStorage localStorage是本地存储的,除非清空本地数据 localStorage不会自动把数据发给服务 ...

  3. 前端 JS,localStorage/sessionStorage、cookie 及 url 等实现前台数据共享、传输

    需求是这样的:需要统计用户公司某款产品用户的回馈情况,美工给的设计多个psd,每个页面里面都有一个选择题,让用户选择自己的答案,最后经过几次选择之后在最后一个页面统一提交到后台!所以这里引出的技术需求 ...

  4. localStorage、sessionStorage和cookie的区别

    本地客户端(浏览器)查看三者信息: HTML4的本地存储:cookie 浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式,可以利用cookie,session等根服务端进行数据交互. 一.co ...

  5. 浅谈localStorage的使用场景和优劣势,以及sessionStorage和cookie

    一.localStorage,sessionStorage,cookie的简单介绍 localStorage:仅在客户端存储不参与服务器通信,存储大小一般为5M,如果不是人为清除,那么即使是关闭浏览器 ...

  6. localStrorage、 sessionStorage 、cookie

          HTML5中增加了两种全新数据存储方式:Web Storage和Web SQL Database. 前者可用于临时或永久保存客户端的少量数据:后者是客户端本地化的一套数据库系统,可将大量数 ...

  7. localStorage , sessionStorage ,cookie 使用介绍

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. localStorage,sessionStorage和cookie的区别

    sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web请求之间保存数据.有了本地数据,就可以避免数据在浏览器和服务器间不必 ...

  9. js使用sessionStorage、cookie保存token

    本文是参考别人的博客写的,图片直接用的别人的 1.Token:token是客户端频繁向服务器端请求数据,服务器频繁的去数据库查询用户名和密码进行对比,判断用户名和密码正确与否,并作出相应的提示,在这样 ...

随机推荐

  1. 在eclipse上使用github,向github中提交项目

    1.下载egit插件 打开Eclipse,git需要eclipse授权,通过网页是无法下载egit的安装包的.在菜单栏依次打开eclipse→help→install new software→add ...

  2. Ansible系列(六):各种变量定义方式和变量引用

    本文目录:1.1 ansible facts1.2 变量引用json数据的方式 1.2.1 引用json字典数据的方式 1.2.2 引用json数组数据的方式 1.2.3 引用facts数据1.3 设 ...

  3. Ruby Rose动态壁纸制作记录

    为Wallpaper Engine做的动态壁纸,使用Unity制作,在这里记录一下制作过程和一些遇到的坑,以后有了github账号再搬到那边去. 最后大概要做出这样的效果,截图来自RWBY " ...

  4. 跨Storyboard调用

    在开发中我们会有这种需求从一个故事板跳到另一个故事板 modal UIStoryboard *secondStoryboard = [UIStoryboard storyboardWithName:@ ...

  5. 为ASP.NetCore程序启用SSL

    紧接着上一篇搭建连接MySql的三层架构的ASP.NetCore2.0的WebApi的案例,这篇来实现为ASP.NetCore启用SSL支持 由于ASP.NetCore默认服务器Kestrel不像ii ...

  6. UI自动化测试简介及Selenium工具的介绍和环境搭建

    自动化测试简介 1.1何为自动化测试? 是把以人为驱动的测试转化为机器执行的一种过程,它是一种以程序测试程序的过程.换言之,就是以程序实现的方式来代替手工测试. 1.2自动化测试分类 分为功能自动化测 ...

  7. Bayesian CTR Prediction for Bing

    Microsoft published a paper in ICML 2009 named ‘Web-Scale Bayesian Click-Through Rate Prediction for ...

  8. 编译期类型检查 in ClojureScript

    前言  话说"动态类型一时爽,代码重构火葬场",虽然有很多不同的意见(请参考),但我们看到势头强劲的TypeScript和Flow.js,也能感知到静态类型在某程度上能帮助我们写出 ...

  9. 57、Bootstrap中文文档

    给大家介绍一个前端框架让你从此写起前端代码与之先前相比如有神助般的效果拉就是Bootstrap. 一.Bootstrap的下载 Bootstrap,由Twitter的设计师Mark Otto和Jaco ...

  10. 访问 IIS 元数据库失败

    问题: 访问 IIS 元数据库失败.说明: 执行当前 Web 请求期间,出现未处理的异常.请检查堆栈跟踪信息,以了解有关该错误以及代码中导致错误的出处的详细信息. 异常详细信息: System.Web ...