關於H5的儲存方式

學過h5或者使用chrome的開發者多多少少知道關於web的儲存方法。介紹一下幾種常見的web儲存方法：

local storage 是使用者儲存 key/value 對的資料。長久儲存整個**的資料，儲存的資料沒有過期時間，直到手動去刪除。

同時需要注意幾點：

儲存型別為 string型別（如果儲存int、list、json則需要轉換）、localstorage不能被爬蟲抓取到、儲存內容多的話會消耗記憶體空間，會導致頁面變卡。

使用方法也十分簡單：

儲存資料：

localstorage.setitem("key", "value");

獲取資料：

localstorage.getitem("key");

刪除資料：

localstorage.removeitem("key");

session storage和local storage 基本類似，區別在於存在時為臨時快取，退出頁面或者退出程式執行則會自動清除。

儲存資料：

sessionstorage.setitem("key", "value");

獲取資料：

sessionstorage.getitem("key");

刪除資料：

sessionstorage.removeitem("key");

indexeddb是一種底層api，用於客戶端儲存大量結構化資料(包括, 檔案/ 二進位制大型物件(blobs)。該api使用索引來實現對該資料的高效能搜尋。雖然 web storage 對於儲存較少量的資料很有用，但對於儲存更大量的結構化資料來說，這種方法不太好用。indexeddb提供了乙個解決方案。

當然，還有另外一種web資料庫——websql（不建議使用）

如果對indexeddb沒有了解過，可以參考此處

以下是我個人使用indexeddb的記錄（基於vue**）：

第一步：抽離封裝為單獨乙個頁面，方便管理

新建indexeddb.js、index.vue

第二步：建立資料庫

indexeddb.js

let daytable = "daytable";
let mysql = "daysql";
let version = 1;
const indexeddb = window.indexeddb || window.webkitindexeddb || window.mozindexeddb;
// 開啟資料庫
export const myindexeddb = );
// 新增字段 unique為唯一性標識
objectstore.createindex("num", "num", ); 
//如果成功返回true
resolve(true)
}request.onerror = function () 
})},
}

第三步：封裝api

indexeddb.js

let daytable = "daytable";
let mysql = "daysql";
let version = 1;
const indexeddb = window.indexeddb || window.webkitindexeddb || window.mozindexeddb;
// 開啟資料庫
export const myindexeddb = );
// 新增字段 unique為唯一性標識
objectstore.createindex("num", "num", ); 
//如果成功返回true
resolve(true)
}request.onerror = function () 
})},
//開啟資料庫
opendb: function () 
})},
// 獲取資料
getindex: async function () else 
},objectstore.onerror = function () 
})}，
//修改資料
putindex: async function (row) 
request.onerror = function () 
})},
// 刪除資料 可以通過傳入的id值刪除
deleteindex: async function (idx) 
request.onerror = function () 
})},
//新增資料
addindex: async function (row) 
request.onerror = function () 
})},
}

index.vue

import  from "src/plugins/indexeddb";
methods:);
myindexeddb.addindex(row).then(res=>{});
myindexeddb.putindex(row).then(res=>{});
myindexeddb.deleteindex(id).then(res=>{});
}}

關於cookies 詳見此處

H5高階儲存

html5程式設計介面 canvas api 拖放api 地理位置api 儲存api 檔案api 通訊api 多執行緒api 離線api 歷史api 選擇元素 queryselector 選擇器獲取乙個元素 queryselectorall 選擇器獲取多個元素監聽事件 addeventlist...

H5離線儲存

首先，我們建立乙個html檔案，類似這樣 network，與fallback，其中network和fallback為可選項，而第一行cache manifest為固定格式，必須寫在前面。cache 必須標識出哪些檔案需要快取，可以是相對路徑也可以是絕對路徑。例如 aa.css，network 可選...

h5離線儲存 manifest

1 問題分析 html5提出的乙個新的特性離線儲存。通過離線儲存，我們可以通過把需要離線儲存在本地的檔案列在乙個manifest配置檔案中，這樣即使在離線的情況下，使用者也可以正常看見網頁。2 核心問題講解這個不是很常用就是告訴大家以後見到要認識使用 1 在需要離線快取儲存的頁面加上 ...

關於H5的儲存方式

H5高階 儲存

H5離線儲存

h5離線儲存 manifest

相關推薦

H5高階儲存