淺談 ： 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 官方文檔