LiJunjie's Blog

Home

HTML5 浏览器存储的过去、现在与将来

30 May 2015

Web app 中会有很多场景想在浏览器端保存一些数据,这篇文章中我们列举一下那些浏览器端本地存储的方案,以及各自的优缺点,还有各浏览器厂商的支持情况。

Cookies (Past, Present and Future)

提到浏览器的本地存储,第一个想到的可能就是使用已久的 cookie ,cookie 在 Web 开发中被广泛使用,如 Session、Authentication 等,之前一些电商网站甚至使用 cookie 保存用户放进购物车的商品。但是 cookie 有一些限制与缺点:

Cookie 有 Expires 属性可以为 cookie 设置过期时间,当不为 cookie 设置过期时间时,用户关闭浏览器后 cookie 被删除;设置了过期时间的 cookie 被称为 Persistent cookie ,如果设置的时间较长,用户关闭浏览器后 cookie 不会被删除,只有到了过期时间才会被删除。这个功能被用来实现登录界面的 'Remeber me for two weeks' 那个 checkbox。

Cookie 在浏览器发明之初就被设计出来并广泛使用,并沿用至今,可以预见未来 cookie 仍会被一直使用。

HTML5 Web Storage (Present and Future)

Web storage 为浏览器本地存储提供了两个对象,这两个对象有相同的 API :

Web storage 提供的 API:

window.localStorage.setItem(key, value);
window.localStorage.getItem(key);
window.localStorage.removeItem(key);
window.localStorage.clear();

另外,可以注册监听 Web storage 的 onstorage 事件,当 Web storage 中的内容有改变时,接收通知。

Web storage 的一些特性:

AngularJS 可以使用 ngStorage 使用 Web storage 。

HTML5 Web SQL Database (Past)

Web SQL Database 想将 SQL-based relational database 带到浏览器中,在 Safari、Chrome、Opera以及 iOS 3.0+、Android 2.0+ 中被实现,但被 Mozzila 与微软抵制。

Web SQL Database 使用浏览器内嵌的 SQlite ,允许使用 Javasript 执行 SQL 语句 进行一系列数据库操作。

优点:

缺点:

基本上 Web SQL Database 还未流行就前途未卜,因此不建议使用。

HTML5 IndexedDB (Future)

IndexedDB provides a structured, transactional, high-performance NoSQL-like data store with a synchronous and asynchronous API.

相对于 Web SQL Database, IndexedDB 提供了更好用的接口,执行 SQL 在 Javascript 中的确是一件比较痛苦的事情。

起初我以为 IndexedDB 提供的是类似于 Redis 这样的 object store ,但并不是这样的,IndexedDB 的 object 类似于 SQL Database 的 record 。关于 IndexedDB 最新的浏览器支持情况比较好,但是在生产环境中真实使用还需再观察一段时间。

跳转 An early walk-through of IndexedDB 了解更多关于 IndexedDB 。

总结

现在除了 cookie ,最成熟的浏览器本地存储方案就是 Web Storage 了,Key/Value pairs 对于大多数应用也够用了。

在 Chrome 的开发者工具中,可以查看这几种存储机制的内容。 Chrome 开发者工具-Resources

References

comments powered by Disqus