前端儲存-cookie-sessionStorage-loacalStorage
阿新 • • 發佈：2018-11-26
0. cookie
h5之前，儲存主要是用cookies。cookies缺點有在請求頭上帶著資料，大小是4k之內。主Domain汙染。 主要應用：購物車、客戶登入 對於IE瀏覽器有UserData，大小是64k,只有IE瀏覽器支援。1.本地儲存localstorage
儲存方式： 以鍵值對(Key-Value)的方式儲存，永久儲存，永不失效，除非手動刪除。 大小： 每個域名5M 支援情況：
注意：IE9 localStorage不支援本地檔案，需要將專案署到伺服器，才可以支援！
檢測方法：
| 1 2 3 4 5 |
if(window.localStorage){
alert('This browser supports localStorage');
}else{
alert('This browser does NOT support localStorage');}
|
getItem //取記錄
setIten//設定記錄
removeItem//移除記錄
key//取key所對應的值
clear//清除記錄
儲存的內容：
陣列，圖片，json，樣式，指令碼。。。（只要是能序列化成字串的內容都可以儲存）
3.web SQL
關係資料庫，通過SQL語句訪問 Web SQL 資料庫 API 並不是 HTML5 規範的一部分，但是它是一個獨立的規範，引入了一組使用 SQL 操作客戶端資料庫的 APIs。 支援情況： Web SQL 資料庫可以在最新版的 Safari, Chrome 和 Opera 瀏覽器中工作。
核心方法：
①openDatabase：這個方法使用現有的資料庫或者新建的資料庫建立一個數據庫物件。
②transaction：這個方法讓我們能夠控制一個事務，以及基於這種情況執行提交或者回滾。
③executeSql：這個方法用於執行實際的 SQL 查詢。
開啟資料庫：
| 1 2 |
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024,fn);
//openDatabase() 方法對應的五個引數分別為：資料庫名稱、版本號、描述文字、資料庫大小、建立回撥
|
執行查詢操作：
| 1 2 3 4 |
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS WIN (id unique, name)');
});
|
插入資料：
| 1 2 3 4 5 6 |
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS WIN (id unique, name)');
tx.executeSql('INSERT INTO WIN (id, name) VALUES (1, "winty")');
tx.executeSql('INSERT INTO WIN (id, name) VALUES (2, "LuckyWinty")');
});
|
讀取資料：
| 1 2 3 4 5 6 7 8 9 10 11 12 |
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM WIN', [], function (tx, results) {
var len = results.rows.length, i;
msg = "<
p
>查詢記錄條數: " + len + "</
p
>";
document.querySelector('#status').innerHTML += msg;
for (i = 0; i < len; i++){
alert(results.rows.item(i).name );
}
}, null);
});
|
由這些操作可以看出，基本上都是用SQL語句進行資料庫的相關操作，如果你會MySQL的話，這個應該比較容易用。
轉載自：http://www.cnblogs.com/LuckyWinty/p/5699117.html