Web本地存储

日期:2017-3-14 20:43 | 标签: | 阅读:395

这里对当今的主流的几种Web本地存储方案进行简单的分析,喜欢的同学可以收下...:)

Cookie 是作为 http 协议的扩展存在的,cookie 会自动在浏览器和服务器之间传输。默认在用户关闭浏览器时清除数据,
一般和 session 结合使用,cookie设置案例为:

document.cookie = 'name=名称; max-age=过期时间; path=路径; domain=域名; secure';

注意

  1. 指定为 secure 是,只有在 https 才传递到服务器端,http 不会传递。
  2. cookie 在设置的有效期内有效,默认为浏览器关闭,max-age 为0可以删除指定 cookie
  3. cookie 有 path 概念,子路径可以访问父路径 cookie,父路径不能访问子路径 cookie

缺点

  1. 每次随请求发送,增加流量
  2. 大小/个数有限制,浏览器不能保存超过 300 个 cookie,单个服务器不能超过 20 个,每个 cookie 不能超过 4k。
  3. 不安全,如果 cookie 被劫持,session 就被泄漏了。
  4. 这 Api 使用方式有点变态,封装成库用比较好

应用场景

判断用户是否登陆过网站

LocalStorage

LocalStorag e就是 Key-Value 的简单键值对存储结构。

缺点

有性能问题?

参考: https://calendar.perfplanet.com/2012/is-localstorage-performance-a-problem/
这是一篇 201 2年的文章,作者认为 localstorage 在 PC 端带来的影响其实是不足为虑的,不过不建议首屏加载时直接使用。
在 2017 年的今天我觉得移动端也不足为虑了,此外,兼容一类问题也早已不是问题。

应用场景

缓存非关键性的 ajax 数据,如不经常更新的数据

IndexedDB

可以存储结构对象,可构建 key 和 index 的索引方式查找,目前各浏览器的已经逐渐支持 IndexedDB 的存储方式, 适合存储大型的结构化数据,一定程度上弥补了 Localstorage 的不足。

各平台支持情况( 结果来自 caniuse.com )

应用场景

先问问自己这四个问题

FileSystem API

FileSystem API 相当于操作本地文件的存储方式,目前支持浏览器不多(只有 Chrome 和Opera 浏览器提供支持), 其接口标准也在发展制定变化中, 应用场景举例:动态生成图片到本地文件,然后通过 filesystem:http:** 的URL方式直接赋值给 img 的 html 元素的 src 访问。

Application Cache

对象是对浏览器的应用缓存的编程访问方式。简单来说,就是可以轻松的创建离线应用。 特性

注意事项

应用场景

WEB 离线应用

Web SQL Database

这是一个废弃的标准了,虽然部分浏览器已经实现,但学一下也没啥坏处
其包括三个核心方法:

参考: http://www.cnblogs.com/dolphinX/p/3405335.html

其它

UserData

IE 专用技术,在没有 localstorage 的时代还是有用的

SessionStorage

用这种方式存储的数据仅窗口级别有效,打开新的窗口或者跳转到新页面即失效。

GlobalStorage

使用于 Firefox2+ 的火狐浏览器,类似于 IE 的 userData

数据共享

部分参考

版权声明: 署名-非商业性使用-禁止演绎 4.0 国际(CC BY-NC-ND 4.0
Copyright ©2013-2017 | 粤ICP备14081691号 | yipeng手工打造 | 联系方式