什么是本地存储

以下内容从网上抄来的

HTML5 storage提供了一种方式让网站能够把信息存储到你本地的计算机上,并再以后需要的时候进行获取。这个概念和cookie相似,区别是它是为了更大容量存储设计的。Cookie的大小是受限的,并且每次你请求一个新的页面的时候cookie都会被发送过去。HTML5的storage是存储在你的计算机上,网站在页面加载完毕后可以通过Javascript来获取这些数据。
简单的说本地存储是HTML5的一部分。更为详细准确的说是本地存储过去是HTML5的标准中的一部分,而后来由于有些工作组的人表示HTML5太庞大了,于是就剥离出来作为一个单独的标准。这听起来好像是把一块馅饼分成很多块目的是为了减少总的卡路里……

为什么要用本地存储

其实前面已经提到了,用本地存储有这些好处

  • 本地存储和cookie一样提供了把数据保存到本地的能力,页面刷新或者关掉浏览器后,数据依然存在
  • 大!虽然不同浏览器的标准可能不一样,主流的一般都在5~10M,比cookie的4k强多了
  • 本地存储的数据不会被发到服务器,与cookie相比,节省带宽,加快响应速度

所以,如果需要保存一些数据到用户的浏览器,而这些数据又不需要每个请求都提交给服务器,不妨考虑使用本地存储。

如何使用

首先,得检查浏览器是否支持本地存储
可以通过检测window下面是否有localStorage字段来判断,但是在IE下,本地文件是不能访问localStorage的,此时localStorage字段为空,所以还要加上判断

还有一种情况,假如页面里有id为localStorage的元素,某些浏览器可以通过window.localStorage索引到这个元素-___,-||
为了避免你的代码在遇到如此蛋疼的DOM时跪掉,我建议是使用特征检查


确定浏览器支持localStorage后,我们就可以使用它的接口了,localStorage的使用方法很简单,在chrome的控制台里面打印一下localStorage,就能列出它的全部方法,我相信很多人一看就能明白了。

我们主要用到的

length:本地存储数据的个数
setItem(key,value):向key字段写入value数据
getItem(key):去key字段的数据
removeItem(key):移除key字段
clear():清空该域下的所有数据
key(i):获取第i个数据的key

我们还可以像操作一个Object一样操作localStorage

唯一不同的是,对于一个不存在的字段notExist,localStorage.getItem(‘notExist’)会返回null,而localStorage[‘notExist’]则返回undefined。

一些细节

看到这里,你已经掌握了使用本地存储的方法了,下面的是我使用过程中的一些心得。
本地存储只能存字符串数据,所有数据在写入的时候会被隐式调用toString方法转为字符串,即

因此,需要存储json之类的数据时,需要自己做转换。
不同浏览器,分配给本地存储的空间是不一样的,譬如chrome是5M。这5M是整个子域共享的,例如http://www.alloyteam.com/2012/04/codejam/和http://www.alloyteam.com/2012/03/css3-checkbox/两个页面同在www.alloyteam.com域下,它们共享同一个本地存储空间,访问到的数据也是同一份;而http://csslib.alloyteam.com/在csslib.alloyteam.com域下,访问的是另一个存储空间。
一个unicode字符占2个字节(英文和中文一样),所以5M可以存储1024*1024/2=524288个字符,包括key和value。也就是说,localStorage.setItem(‘user’,’John’)向本地存储写进了8个字符(16Byte)。这个网站有一份各种浏览器分配给localStorage存储空间大小的表,你也可以在上面测试当前使用的浏览器支持多大的存储空间,不过它的数据有个问题,它没有考虑到一个unicode字符占2字节,因此它的数据应该全部乘2。
当本地存储满了,再往里面写数据,将会触发error(这点和cookie的表现不一样),因此一个严谨的脚本应该捕捉写localStorage的错误

当调用localStorage.clear()时,整个域的数据会被清空,包括和当前页面共享一个存储空间的其他页面。

浏览器不支持本地存储怎么办

对于IE6和IE7,有userData,可以提供最多1024kb的空间,虽然userData可以设置有效期,但是仍然存在写满报错的问题,并且userData创建的存储文件不能被枚举,因此需要人为地维护。
另外还可以使用内嵌flash控件,使用flash的本地存储空间,flash默认提供100kb,使用更多需要用户授权。
这两种方法的使用成本较高,本文就不再展开讨论了。

原创文章转载请注明:

转载自AlloyTeam:http://www.alloyteam.com/2012/04/sth-about-localstorage/

  1. LiH 2017 年 3 月 2 日

    顶一下,另外localStorage还可以监听事件,另另外 全端=全栈?

  2. 左手Cookie“小甜饼”,右手Web Storage — 好JSER 2016 年 12 月 16 日

    […] 八一下LocalStorage本地存储的卦——AlloyTeam […]

  3. purejade 2016 年 2 月 25 日

发表评论