Web前端实现本地存储

1、本地化存储概念以及历史

  • 历史:
Web前端实现本地存储_第1张图片
  • 概念

类型  
HTPP cookie
1.HTTP cookie的缺点很明显,最多只能存储4KB的数据,每个HTTP请求都会被传送回服务器,明文传输(除非你使用SSL)。
2.Cookie是为了解决HTTP无状态的特性而出现的,也可以叫用户识别机制。
userData 借助DHTML的behaviour属性来存储本地数据, 允许每个页面最多存储64K数据,每个站点最多640K数据,userData的缺点显而易见,它不是Web标准的一部分,除非你的程序只需要支持IE, 否则它基本没什么用处。
Flash cookie Flash cookie默认允许每个站点存储不超过100K的数据,如果超出了,Flash会自动向用户请求更大的存储空间,借助Flash的 ExternalInterface接口,你可以很轻松地通过Javascript操作Flash的本地存储。Flash的问题很简单,就是因为它是 Flash。
Gears Gears内置了一个基于SQLite的嵌入式 SQL数据库,并提供了统一API对数据库进行访问,在取得用户授权之后,每个站点可以在SQL数据库中存储不限大小的数据,Gears的问题就是 Google自己都已经不用它了。

从上面的简介我们可以看出,在以前,本地存储面临的主要问题是,对于存储容量较大的方式,需要特定的插件支持;对于不需要插件支持的存储方式,则处于安全问题或者大小限制而遭到扼杀。在这种双重的矛盾面前,HTML5本地存储横空出世,对于前端开发人员是一种巨大的福音。

2、HTML5本地存储
所谓的HTML5本地存储更精确的说法应该是DOM存储。根据MDN的定义,DOM存储的机制是通过存储字符串类型的键/值对,来提供一种安全的存取方式.这个附加功能的目标是提供一个全面的,可以用来创建交互式应用程序的方法(包括那些高级功能,例如可以离线工作一段时间)。

DOM存储  
会话存储(SessionStorage ) 用于临时保存针对一个窗口(或标签页)的数据。在访客关闭窗口或者标签页之前,这些数据是存在的,而关闭之后就会被浏览器删除。
本地存储(LocalStorage ) 用于长期保存网站的数据,并且站内任何页面都可以访问该数据。

3、DOM存储中本地存储与会话存储的异同
  1.本地存储和会话存储的操作代码完全相同,它们的区别仅在于数据的寿命。
  2.本地存储主要用来保存访客将来还能看到的数据。
  3.会话存储则用于保存那些需要从一个页面传递给下一个页面的数据。

你可能感兴趣的:(Web前端)