技术分享 Technology to share

浏览器html5本地储存详解

为了减轻服务器的压力,攻城狮一般都会把一些不敏感的数据保存到客户端来减少服务器的压力,同时也提升了用户的体验度(不用在等待服务器的响应时间),这时本地储存就显得格外重要。

浏览器本地储存的历史:

1:Cookie

最早的Cookie想必是大家都知道,我个人是比较喜欢使用的,因为几乎所有浏览器都支持并且支持得还蛮好。问题主要就是储存空间太小,大概也就4KB的样子,而且浏览器还限制每个域名储存Cookie的个数。

2:Flash

昔日的王者吧,曾经也是倍受宠爱。空间大约是Cookie的25倍,基本够用(这里就不过多解释了。。。苹果不支持╮(╯▽╰)╭)。

3:Gears

再之后Google推出了Gears,虽然没有限制,但不爽的地方就是要装额外的插件(没具体研究过)。

4:HTML5本地储存

到了HTML5把这些都统一了,官方建议是每个网站5MB,非常大了,就存些字符串,足够了。比较诡异的是居然所有支持的浏览器目前都采用的5MB,尽管有一些浏览器可以让用户设置,但对于前端攻城狮来说,目前的形势就5MB来考虑是比较妥当的。

HTML5本地储存使用教程

H5本地存储有两个API,一个是Web Storage,还有一个是Web SQL(这里也不做过多的介绍...兼容性较差,且需要sql语言是大多数前端攻城狮不具备的技能,不过不能否定Web SQL Database才是牛逼的存在)。不管是哪一个,都是基于JavaScript语言来使用,学习Web Storage只需背熟这句口诀:“两个接口,四个函数”。

1:诀窍

(1)两个接口:分别是localStoragesessonStorage

(2)四个函数:分别是setItemgetItemremoveItemclear

2:localStorage

(1)特性:

   域内安全、永久保存。即客户端或浏览器中来自同一域名的所有页面都可访问localStorage数据且数据除了删除否则永久保存,但客户端或浏览器之间的数据相互独立。

(2)四个函数:

   A. localStorage.setItem(键名,键值)    存储数据信息到本地

   B. localStorage.getItem(键名)    读取本地存储的信息

   C. localStorage.removeItem(键名)  删除本地存储的信息

   D. localStorage.clear()     清空所以存储的信息

3、sessionstorage:

 (1)特性:

   会话控制、短期保存。会话概念与服务器端的session概念相似,短期保存指窗口或浏览器或客户端关闭后自动消除数据。

 (2)四个函数:

   A. sessionStorage.setItem(键名,键值)    存储数据信息到本地

   B. sessionStorage.getItem(键名)     读取本地存储的信息

   C. sessionStorage.removeItem(键名)   删除本地存储的信息

   D. sessionStorage.clear()    清空所以存储的信息

4:兼容问题

检测代码

  //兼容检测
  if(!!window.localStorage){
  //支持
  }else{
  //不支持
  }

目前智能手机都支持H5/C3并且现在网民大多数上网所用设备都是手机,如果真的要纠结pc的老古董浏览器。在储存量不大的情况下可以选择 Web Storage和cookie两者一起