1、LocalStorage
LocalStorage就是Key-Value的简单键值对存储结构，Web Storage除了localStorage的持久性存储外，还有针对本次回话的sessionStorage方式，一般情况下localStorage较为常用，示例代码如下：
function save(dataModel){
var value = dataModel.serialize()
window.localStorage['DataModel'] = value
window.localStorage['DataCount'] = dataModel.size()
console.log(dataModel.size() + ' datas are saved')
return value
}
function restore(dataModel){
var value = window.localStorage['DataModel']
if(value){
dataModel.deserialize(value)
console.log(window.localStorage['DataCount'] + ' datas are restored')
return value
}
return ''
}
function clear(){
if(window.localStorage['DataModel']){
console.log(window.localStorage['DataCount'] + ' datas are cleared')
delete window.localStorage['DataModel']
delete window.localStorage['DataCount']
}
}
2、Cookie
这种存储方式存储内容很有限，只适合做简单信息存储，存取接口设计得极其反人类，举例如下：
function getCookieValue(name) {
if (document.cookie.length >0) {
var start = document.cookie.indexOf(name + "=")
if (start !== -1) {
start = start + name.length + 1
var end = document.cookie.indexOf("", start)
if (end === -1){
end = document.cookie.length
}
return unescape(document.cookie.substring(start, end))
}
}
return ''
}
function save(dataModel) {
var value = dataModel.serialize()
document.cookie = 'DataModel=' + escape(value)
document.cookie = 'DataCount=' + dataModel.size()
console.log(dataModel.size() + ' datas are saved')
return value
}
3、Indexed Database API
IndexedDB可以存储结构对象，可构建key和index的索引方式查找，目前各浏览器的已经逐渐支持IndexedDB的存储方式，其使用代码如下，需注意IndexedDB的很多操作接口类似NodeJS的异步回调方式，特别是查询时连cursor的continue都是异步再次回调onsuccess函数的操作方式，因此和NodeJS一样使用上不如同步的代码容易。
function save(dataModel){
var tx = db.transaction("meters", "readwrite")
var store = tx.objectStore("meters")
dataModel.each(function(data){
store.put({
id: data.getId(),
tag: data.getTag(),
name: data.getName(),
meterValue: data.a('meter.value'),
meterAngle: data.a('meter.angle'),
p3: data.p3(),
r3: data.r3(),
s3: data.s3()
})
})
tx.oncomplete = function() {
console.log(dataModel.size() + ' datas are saved')
}
return dataModel.serialize()
}
4、FileSystem API
FileSystem API相当于操作本地文件的存储方式，目前支持浏览器不多，其接口标准也在发展制定变化中，因此也可以动态生成图片到本地文件，然后通过 filesystem:http:*** 的URL方式直接赋值给img的html元素的src访问。
function save(dataModel) {
var value = dataModel.serialize()
fs.root.getFile('meters.txt', {create: true}, function (fileEntry) {
console.log(fileEntry.toURL())
fileEntry.createWriter(function (fileWriter) {
fileWriter.onwriteend = function () {
console.log(dataModel.size() + ' datas are saved')
}
var blob = new Blob([value], {type: 'text/plain'})
fileWriter.write(blob)
})
})
return value
}
5、Application Cache
window.applicationCache 对象是对浏览器的应用缓存的编程访问方式。其 status 属性可用于查看缓存的当前状态：
var appCache = window.applicationCache
switch (appCache.status) {
case appCache.UNCACHED: // UNCACHED == 0
return 'UNCACHED'
break
case appCache.IDLE: // IDLE == 1
return 'IDLE'
break
case appCache.CHECKING: // CHECKING == 2
return 'CHECKING'
break
case appCache.DOWNLOADING: // DOWNLOADING == 3
return 'DOWNLOADING'
break
case appCache.UPDATEREADY: // UPDATEREADY == 4
return 'UPDATEREADY'
break
case appCache.OBSOLETE: // OBSOLETE == 5
return 'OBSOLETE'
break
default:
return 'UKNOWN CACHE STATUS'
break
}
HTML5本地存储——Web SQL Database在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage，这两个是以键值对存储的解决方案，存储少量数据结构很有用，但是对于大量结构化数据就无能为力了，灵活大不够强大。
Web SQL Database
我们经常在数据库中处理大量结构化数据，html5引入Web SQL Database概念，它使用 SQL 来操纵客户端数据库的 API，这些 API 是异步的，规范中使用的方言是SQLlite，你假如感兴趣，可以来我的裙，一起学习交流下，同时也欢迎每一位大神，前面是二五七，中间是014，后面是001，组合起来就是了，非常欢迎真心久留学习的。
三个核心方法
但是我们学一下也没什么坏处，而且能和现在W3C力推的IndexedDB做比较，看看为什么要废弃这种方案。Web SQL Database 规范中定义的三个核心方法：
openDatabase：这个方法使用现有数据库或新建数据库来创建数据库对象
transaction：这个方法允许我们根据情况控制事务提交或回滚
executeSql：这个方法用于执行SQL 查询
HTML5 是下一代 HTML 标准，开始吸引越来越多人的目光。HTML5 的 DOM Storage 机制提供了一种方式让程序员能够把信息存储到本地的计算机上，在需要时获取。这点和 cookie 相似，区别是 DOM Storage 提供了更大容量的存储空间。目前，在客户端保存数据使用最多的是 cookie，但 cookie 的大小上限为 4KB，并且每次请求一个新页面时 cookie 都会被发送过去。更多的存储空间需要浏览器本身或是插件的支持，例如只在 Internet Explorer 上使用的 userData，需要额外安装插件的 Google Gears 和 Flash。现在，HTML5 提供了一种标准的接口，使程序员可以简单地访问存储的数据。由于键值对存储在本地计算机上，在页面加载完毕后可以通过 JavaScript 来操作这些数据。
HTML5 的建议是每个网站提供给 Storage 的空间是 5MB，一般来说足够存字符串。如果存入的数据太大，有些浏览器如 Chrome 会抛出 QUOTA_EXCEEDED_ERR 异常。所以虽然 DOM Storage 提供的空间比 cookie 要大很多，但在使用需要注意限制。
安全性
一般不要在客户端存储敏感的信息，使用 localStorage、globalStorage 等在客户端存储的信息都非常容易暴露。应该在完成数据存储后使用 clear 或者 removeItem 方法清除保存在 Storage 对象中的数据。
存储事件驱动
如果想在存储成功或修改存储的值时执行一些操作，可以用 DOM Storage 接口提供的事件。
