localstorage兼容ie8以下浏览器的问题

时间:2024-10-21 07:40:51

最近在做一个网站,由于希望尽可能减小服务器的压力,也想提高网站的运转速度,就想尽可能少的在服务器上读写数据以及下载重复数据,需要重复使用的数据,就储存在本地,能在本地进行的运算,尽一切可能在本地完成。

 

于是就出现一个本地存储数据的问题。如果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>