Web前端实现本地存储
2017-06-29 16:38
387 查看
1、本地化存储概念以及历史
历史:
概念
从上面的简介我们可以看出,在以前,本地存储面临的主要问题是,对于存储容量较大的方式,需要特定的插件支持;对于不需要插件支持的存储方式,则处于安全问题或者大小限制而遭到扼杀。在这种双重的矛盾面前,HTML5本地存储横空出世,对于前端开发人员是一种巨大的福音。
2、HTML5本地存储
所谓的HTML5本地存储更精确的说法应该是DOM存储。根据MDN的定义,DOM存储的机制是通过存储字符串类型的键/值对,来提供一种安全的存取方式.这个附加功能的目标是提供一个全面的,可以用来创建交互式应用程序的方法(包括那些高级功能,例如可以离线工作一段时间)。
3、DOM存储中本地存储与会话存储的异同
1.本地存储和会话存储的操作代码完全相同,它们的区别仅在于数据的寿命。
2.本地存储主要用来保存访客将来还能看到的数据。
3.会话存储则用于保存那些需要从一个页面传递给下一个页面的数据。
历史:
概念
类型 | |
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自己都已经不用它了。 |
2、HTML5本地存储
所谓的HTML5本地存储更精确的说法应该是DOM存储。根据MDN的定义,DOM存储的机制是通过存储字符串类型的键/值对,来提供一种安全的存取方式.这个附加功能的目标是提供一个全面的,可以用来创建交互式应用程序的方法(包括那些高级功能,例如可以离线工作一段时间)。
DOM存储 | |
会话存储(SessionStorage ) | 用于临时保存针对一个窗口(或标签页)的数据。在访客关闭窗口或者标签页之前,这些数据是存在的,而关闭之后就会被浏览器删除。 |
本地存储(LocalStorage ) | 用于长期保存网站的数据,并且站内任何页面都可以访问该数据。 |
1.本地存储和会话存储的操作代码完全相同,它们的区别仅在于数据的寿命。
2.本地存储主要用来保存访客将来还能看到的数据。
3.会话存储则用于保存那些需要从一个页面传递给下一个页面的数据。
相关文章推荐
- web前端实现本地存储
- JavaScript 实践HTML5 localStorage 本地存储Json等数据 助于移动设备和web前端开发
- web前端-在迷惘中的探索HTML5(二)本地存储之IndexDB
- VUE+WebPack精美游戏设计:实现像微信红包打开时钱币转动的动画精灵和页面数据的本地存储
- web存储 实现本地存储
- 【麦子学院】03.web前端开发之html5本地存储、网页留言板、video、audio、HTML5拖放
- (十)HTML5本地存储——SQLLite实现web留言本
- 【web前端】折腾:瀑布流布局(基于多栏列表流体布局实现)
- 巧用FileSystem组件实现WEB应用中的本地特定打印的方法
- 使用 HTML 5 开启移动 Web 应用程序的本地存储
- 【web前端】JavaScript实现图片幻灯片滚动播放动画效果
- 分离mysql和存储实现双web负载均衡
- SideShow Gadget本地存储实现
- 前端 _本地存储问题
- HTML5开发学习(3):本地存储之Web Sql Database(附源码)
- html5-web本地存储
- html5的本地存储localstorage和web databases
- SideShow Gadget本地存储实现
- 【Nutch】Linux下应用nutch 1.0 Web前端实现单机检索
- 【web前端】团购类网站倒计时的js实现