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

其中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的方案了，如果你的项目要求兼容的浏览器不那么严格的话，可以尝试以上方案。至于无痕模式的解决方案还在探索中，以后会发出来。