浅谈 ： web 前端本地存储

前端的本地存储方式有：localStorage、sessionStorage、cookie、webSQL、indexedDB等

cookie : 用于客户端数据的存储，在客户端请求服务端，使用response向客户端浏览器发送一个cookie,当客户端再次访问该网站的时候，浏览器会把请求的地址和cookie数据一起提交给服务器，服务器检查该cookie，用来判断客户的登录状态，存储大小为4KB。

//js读取
document.cookie;
//js写入
document.cookie = 'name=value';
//js删除
找到相对name对应的值，将存储时间设置为过去时间： expires=过去时间；
//设置作用域 domain设置有效作用域 path限制有效路径
cookie.domain = 'www.baidu.com';//www主机下所有位置可以获取
cookie.domain = 'baidu.com'；//baidu.com域下所有主机的所有位置都可以获取
cookie.domain = 'www.baidu.com/test';cookie.path = '/test';//主机的test下可以获取

Web Storage 其中包含localStorage和sessionStorage两种机制，这两种机制是通过Window.sessionStorage 和 Window.localStorage ，调用其中任意对象会创建storage对象，通过对storage对象设置，获取和删除进行控制。两者存储的形式只能是字符串类型的键值对。

//js读取
localStorage.getItem('name');
sessionStorage.getItem('name');
//js写入
localStorage.setItem('name','value');
sessionStorage.setItem('name','value');
//js删除
localStorage.removeItem('name');
sessionStorage.removeItem('name');
//删除所有key/value
localStorage.clear();
sessionStorage.clear();

localStorage：永久存储，在浏览器关闭后，重新打开后数据仍然存在，需要手动删除，不然一直存在。不同浏览器中支持存储的大小不同，一般为5M。
sessionStorage：在浏览器页面会话期间可用（包换页面重新加载和恢复），会话结束就被删除。

webSQL和indexedDB都是用于在客户端存储大量结构化数据的解决方案，webSOL实现了传统的SQL语句的数据库操作，indexedDB实现了noSQL的存储方式

webSQL：一个独立的贵方，引入了使用SQL操作客户端数据库的API，分为同步和异步，同步的API在Worker Threads上有用，一般使用异步。被广泛使用与手机端浏览器。核心方法为：openDatabase，transaction和executeSql

//打开数据库,如果数据库不存在，则会创建一个新的数据库
var db = openDatabase(‘数据库名称’，‘版本号’，‘描述文本’，‘数据库大小’，‘创建数据回调，创建后被调用’)；
//数据查询
db.transaction((ts) => {
//创建一个表名cubefe的表
ts.executeSql('CREATE TABLE IF NOT EXISTS cubefe(id, name)')；
//插入数据
ts.executeSql('INSERT INTO cubefe (id, name) VALUES (1, 'yueying')');
//删除数据
ts.executeSql('DELETE FROM cubefe WHERE id=1');
//更新数据
ts.executeSql('UPDATE cubefe SET name='xxx' WHERE id=2');
});

详细的webSQL规范可以参考官方文档

indexedDB：一个用于客户在浏览器中存储大量结构化数据，是一个基于js的面向对象的数据库。分别为同步和异步提供了单独的API。

//数据信息
var users = [{id,name,password},{id,name,password}];
//创建数据库
var req = window.indexedDB.open('name',版本号)；
//处理错误
req.onerror = (e) => {}
//处理成功
req.onsuccess = (e) => {}
//处理数据库版本，请求打开的数据库的版本和已经存在的数据库版本号不一致的时候调用
req.onupgradeneeded = (e) => {
var db = e.target.result;
//创建一个空间用来存储客户信息，指定一个’id‘,用来保证唯一
var objectStore = db.createObjectStore("customers", { keyPath: "id" });
//创建一个索引通过name搜索客户
objectStore.createIndex("name", "name", { unique: false });
// 在新创建的对象存储空间中保存值
for (var i in users) {
 objectStore.add(users[i]);
}
}
//写入数据
var transaction = req.transaction(['customers'],'readwrite')
var var objectStore = transaction.objectStore("customers");//获取在创建的存储空间，之后在往里面存储数据
for (var i in customerData) {
  var request = objectStore.add(customerData[i]);
};
//所有数据都被增加后执行
transaction.oncomplete = (e) => {}

详细的indexedDB规范参考官方文档

localForage:Mozilla开发的一个js库，实现离线存储,相比indexedDB和webSQL，存储更简单。

1. 支持IndexedDB，WebSQL 和 localStorage 三种存储模式（自动为你加载最佳的驱动程序）

2. 支持任意类型的数据，可以存储图片等

3. 支持es6 promise

//默认的配置
localforage.config({
    dirver://选择首选的驱动程序
    name://数据库名称
    version://版本号
    size://数据库大小 ，目前只是在websql有用
    storeName://存储集合的名称
    description://数据库的描述
})

//存储数据
localforage.setItem('key', 'value', successCallback)
localforage.setItem('key', 'value').then().catch() //promise 形式
//获取数据
localforage.getItem('key', successCallback)
localforage.getItem('key').then().catch() //promise 形式
//删除数据
localforage.removeItem('key', successCallback)
localforage.removeItem('key').then().catch() //promise 形式
//删除所有数据
localforage.clear(successCallback)
localforage.clear().then().catch() //promise 形式

其他API 官方文档