sessionStorage,UserDataStorage,cookie全兼容写法存在的问题
最近央视播出了中国诗词大赛，看到了一首诗，送给大家
《春宵·春宵一刻值千金》
春宵一刻值千金，花有清香月有阴。
歌管楼台声细细，秋千院落夜沉沉。
好了，言归正传，今天在项目中为了性能问题，打算用本地存储来保存网页的状态，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
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的方案了，如果你的项目要求兼容的浏览器不那么严格的话，可以尝试以上方案。至于无痕模式的解决方案还在探索中，以后会发出来。
总结，做个前端真不容易啊！一堆堆的坑等着你跳。
浙公网安备 33010602011771号