最近在做一个网站,由于希望尽可能减小服务器的压力,也想提高网站的运转速度,就想尽可能少的在服务器上读写数据以及下载重复数据,需要重复使用的数据,就储存在本地,能在本地进行的运算,尽一切可能在本地完成。
于是就出现一个本地存储数据的问题。如果ie不是国内最广泛的浏览器,如果ie9(ie8存在一些问题,后面再说)已经得到普及,那么一切就都很简单了,用html5的localstorage,一切都变得异常简单——谷歌浏览器早就支持localstorage了,但ie支持得很晚。
问题是,ie8以下的浏览器不支持localstorage;据说ie8支持localstorage,但我把ie升级到ie8之后,任然无法使用localstorage——一开始我以为是我的程序有问题,后来又觉得是ie8安装有问题,重装之后,我最终确定是ie8的升级程序有问题,微软的东西总是这么烂,早已习以为常了——这一来一去,差不多折腾了我三四个小时。
于是乎我确定,即便用户浏览器是ie8,也要考虑无法使用localstorage的可能——而且从前段时间别人使用我的网站的情况来看,这种可能性还很大。
既然ie8要排除在外,而ie9只能在win7上使用,win7现在又远未达到全面普及的程度——那么就必须解决低版本ie使用localstorage的兼容问题——真是生不逢时,再过几年就根本不用考虑这个兼容问题了。
网上有几篇讨论这个问题的文章(都是中文,我读英文网页还是有一定心理障碍),其中被转载最多的是这篇:/zjcn/archive/2012/07/03/
由于我还属于刚入门的菜鸟级程序员,所以很多东西根本弄不懂,坑爹的是这篇文章给的代码零零散散,没法直接把它的代码直接嵌到程序里,而要弄懂它代码的意思又需要大费周章,另外找到几篇文章,把代码放进去,又会冒出一大堆我搞不懂的错误。
于是我决定从最基础的原理开始,自己动手来做兼容程序,别人没有为你定做贴身的程序,就只有靠自己了,好在原理很简单:
ie浏览器在很早的时候就支持一种UserData的本地存储功能,不过ie的UserData用起来比localstorage麻烦得不止一点半点(当然二者的差异还不止于此),接下来要做的就是用UserData来模拟localstorage的所有功能。
localstorage有几项核心功能:
1( key );——读变量
2( key, value );——写变量
3( key );——删除变量
4(); ——变量初始化
5;——本地变量的个数;
6( i );——按序号读取变量;
对于我做网站来说,最后两个功能基本用不上,我就没写,但要实现也很简单,如果你需要的话可以联系我,我们一起切磋。
接下来就是要用UserData前面几项模拟功能,关于UserData的使用方法,我主要是参考了这篇文章:
http:///article/
不过这篇文章也有几个坑爹的地方,让我浪费了不少时间。
等我把UserData和localStorage的基本用法都弄懂了之后,我发现上面那篇介绍兼容方法的文章有不少亮点,但也有很多不如人意的地方——最大的问题是他是采用了用节点储存变量的方法,这样的话变量的总大小不能超过124k,这个规模对我的网站来说太小了,于是我采用了用文件储存的方式,这样变量大小就能达到1M,够用了。
敲了几个小时的键盘,反复调试后,这段代码终于可以用了。(代码在下面)
使用方法:
(1)把这段代码放在第一个进行本地存储的语句之前的任何位置;
(2)代码必须在<html>标签内;
(3)不能将本地变量名设为"userdata_record"
(4)不能以 userdataobj 命名变量
(5)加入代码后,如果不使用和( i ),那么你就完全按照localStorage的使用方法进行本地存储就可以了。
如果有问题欢迎和我联系。
<script language="JavaScript" type="text/javascript">
if(typeof(localStorage)=='undefined')
{var box = || ("head")[0] || ;
userdataobj = ('input');
= "hidden";
("#default#userData");
(userdataobj);
//设定对象
var localStorage= {
setItem:function(nam,val)
{(nam);
(nam,val);
var d= new Date();
( ()+700);
=();
(nam);
("userdata_record");
var dt=("userdata_record");
if(dt==null)dt='';
dt=dt+nam+",";
("userdata_record",dt);
("userdata_record");},
//模拟 setItem
getItem:function(nam)
{(nam);
return (nam); },
//模拟 getItem
removeItem:function(nam)
{(nam);
clear_userdata(nam)
("userdata_record");
var dt=("userdata_record");
var reg=new RegExp(nam+",","g");
dt=(reg,'');
var d= new Date();
( ()+700);
= ();
("userdata_record",dt);
("userdata_record");
},
//模拟 removeItem
clear:function(){
("userdata_record");
var dt=("userdata_record").split(",");
for (var i in dt)
{if(dt[i]!='')clear_userdata(dt[i]) }
clear_userdata("userdata_record")
}
//模拟 clear();
}
function clear_userdata(keyname)//将名字为keyname的变量消除
{var keyname;
var d= new Date();
( ()-1);
(keyname);
=();
(keyname);
}
}
</script>