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

最新推荐文章于 2024-08-15 20:33:20 发布

似曾相识-

最新推荐文章于 2024-08-15 20:33:20 发布

阅读量1.8w

点赞数 5

分类专栏：移动端H5/CSS3 文章标签：浏览器

移动端H5/CSS3 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

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

于是就出现一个本地存储数据的问题。如果ie不是国内最广泛的浏览器，如果ie9（ie8存在一些问题，后面再说）已经得到普及，那么一切就都很简单了，用html5的localstorage，一切都变得异常简单——谷歌浏览器早就支持localstorage了，但ie支持得很晚。

问题是，ie8以下的浏览器不支持localstorage；据说ie8支持localstorage，但我把ie升级到ie8之后，任然无法使用localstorage——一开始我以为是我的程序有问题，后来又觉得是ie8安装有问题，重装之后，我最终确定是ie8的升级程序有问题，微软的东西总是这么烂，早已习以为常了——这一来一去，差不多折腾了我三四个小时。

于是乎我确定，即便用户浏览器是ie8，也要考虑无法使用localstorage的可能——而且从前段时间别人使用我的网站的情况来看，这种可能性还很大。

既然ie8要排除在外，而ie9只能在win7上使用，win7现在又远未达到全面普及的程度——那么就必须解决低版本ie使用localstorage的兼容问题——真是生不逢时，再过几年就根本不用考虑这个兼容问题了。

网上有几篇讨论这个问题的文章（都是中文，我读英文网页还是有一定心理障碍），其中被转载最多的是这篇：http://www.cnblogs.com/zjcn/archive/2012/07/03/2575026.html

由于我还属于刚入门的菜鸟级程序员，所以很多东西根本弄不懂，坑爹的是这篇文章给的代码零零散散，没法直接把它的代码直接嵌到程序里，而要弄懂它代码的意思又需要大费周章，另外找到几篇文章，把代码放进去，又会冒出一大堆我搞不懂的错误。

于是我决定从最基础的原理开始，自己动手来做兼容程序，别人没有为你定做贴身的程序，就只有靠自己了，好在原理很简单：

ie浏览器在很早的时候就支持一种UserData的本地存储功能，不过ie的UserData用起来比localstorage麻烦得不止一点半点（当然二者的差异还不止于此），接下来要做的就是用UserData来模拟localstorage的所有功能。

localstorage有几项核心功能：

1window.localStorage.getItem( key );——读变量

2window.localStorage.setItem( key, value );——写变量

3window.localStorage.removeItem( key );——删除变量

4window.localStorage.clear(); ——变量初始化

5window.localStorage.length;——本地变量的个数；

6window.localStorage.key( i );——按序号读取变量；

对于我做网站来说，最后两个功能基本用不上，我就没写，但要实现也很简单,如果你需要的话可以联系我，我们一起切磋。

接下来就是要用UserData前面几项模拟功能，关于UserData的使用方法，我主要是参考了这篇文章：

http://www.jb51.net/article/24086.htm

不过这篇文章也有几个坑爹的地方，让我浪费了不少时间。

等我把UserData和localStorage的基本用法都弄懂了之后，我发现上面那篇介绍兼容方法的文章有不少亮点，但也有很多不如人意的地方——最大的问题是他是采用了用节点储存变量的方法，这样的话变量的总大小不能超过124k，这个规模对我的网站来说太小了，于是我采用了用文件储存的方式，这样变量大小就能达到1M,够用了。

敲了几个小时的键盘，反复调试后，这段代码终于可以用了。(代码在下面)

使用方法：

（1）把这段代码放在第一个进行本地存储的语句之前的任何位置；

（2）代码必须在<html>标签内；

（3）不能将本地变量名设为"userdata_record"

（4）不能以 userdataobj 命名变量

（5）加入代码后，如果不使用localStorage.length和localStorage.key( i )，那么你就完全按照localStorage的使用方法进行本地存储就可以了。

如果有问题欢迎和我联系。

if(typeof(localStorage)=='undefined')

{var box = document.body || document.getElementsByTagName("head")[0] || document.documentElement;

userdataobj = document.createElement('input');

userdataobj.type = "hidden";