web客户端存储技术笔记

客户端存储的相关技术有

• localStorage 键-值对存储，绑定到某个域，并存储浏览器会话数据；

• sessionStorage 键-值对存储，绑定到某个域，会话结束时会删除；

• IndexedDB 由一个浏览器内建的对象存储器，来存储跨会话数据；

• WebSQLDatabases 一个完整的关系型数据库，可以作为IndexedDB的替代方案；

• menifest 通过声明menifest文件，来让客户端存储离线文件。

localStorage的用法示例

• 保存
  localStorage.setItem(“background_color”,$(“#background_color”).val())

• 获取
  var bgcolor = localStorage.getItem(“background_color”)

• 模拟使用场景
  设置用户个性化样式，通过表单选择CSS值后，将其发送给服务器的同时设置localStorage。在页面加载的时候，将localStorage的值取出，将样式通过DOM操作应用到界面上。

sessionStorage的用法示例

会话结束时删除数据，则可以采用这种方法。

• 保存
  sessionStorage.setItem(‘name’,’Brian Hogan’)

• 取出
  var name = sessionStorage.getItem(‘name’)

IndexedDB用法

操作和数据库类似，它的主要特点是请求后由事件异步执行。首先和相应数据库发送连接请求，请求成功后执行增删改查等操作。
《HTML5和CSS3实例教程》上内容较老，具体参考火狐开发者文档：
https://developer.mozilla.org...

离线应用的实现

创建一个manifest文件，里面包含web 应用客户端文件（HTML、CSS、JS文件），当用户第一次访问HTML主页时，menifest所标注的所有文件都会下载到客户端。
manifest文件必须通过 text/cache-manifest 的MiME类型来提供给用户。