浅谈 ： 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 官方文档