HTML5のローカルストレージ機能
この記事で紹介するローカルストレージは、Webストレージ、Web SQLデータベース、IndexedDBです。
Webストレージ
Web Storageは、HTML5で導入された非常に重要な機能です。クライアント側でローカルにデータを保存できます。HTML4Cookieに似ていますが、実現可能な機能はCookieよりもはるかに強力です。Cookieのサイズは4KBに制限されています。公式の推奨事項Webストレージの容量は各Webサイト5MB用です。
Webストレージは2つのタイプに分けられます：
sessionStorageはデータをセッションに保存し、ブラウザを閉じると消えます。
localStorageは常にクライアントにデータをローカルに保存します。html5localStorageはHTML5ローカルストレージWebストレージ機能のAPIの1つであり、html5 localStorageは一時的なオフラインデータを保存し、ファイルやデータベースと同じようにクライアントにデータを保存するために使用されます。永続的な性質を持っています。
[localstorageフォルダーはどこにありますか？付録を見てください]
sessionStorageであるかlocalStorageであるかに関係なく、使用可能なAPIは同じです。一般的に使用されるAPIは次のとおりです（例としてlocalStorageを取り上げます）。
データを保存します：localStorage.setItem（key、value）;
データの読み取り：localStorage.getItem（key）;
単一のデータを削除します：localStorage.removeItem（key）;
すべてのデータを削除します：localStorage.clear（）;
インデックスのキーを取得します：localStorage.key（index）;
その中で、キーと値の両方が文字列である必要があります。つまり、Web StorageAPIは文字列のみを操作できます。
セキュリティ上の理由から、お金やその他の重要な情報が関係している場合は、背景を持っている方がよいでしょう。
【注意
LocalStorageストレージメソッド。次の3つのメソッドは同じ効果があります。
localStorage.name = 'vanida；
localStorage ["name"] = 'vanida'；
localStorage.setItem（ "name"、 "vanida"）;
LocalStorageはvalueメソッドを取得しますが、次の3つのメソッドは同じ効果があります。
var name = localStorage ["name"]
var name = localStorage.name
var name = localStorage.getItem（ "name"）;
LocalStorageは特定の値のメソッドをクリアします。次の2つのメソッドは同じ効果があります。
localStorage.removeItem（ "name"）;
localStorage.name ＝ '';
LocalStorageはすべての値をクリアしますメソッド：
localStorage.clear（）
】
ブラウザがlocalstorageをローカルに保存しているかどうかを検出するコード：
if（window.localStorage）{
alert（ 'このブラウザはローカルストレージをサポートしています'）;
}そうしないと{
alert（ 'Tこのブラウザはローカルストレージをサポートしていません'）;
}
以下に、簡単な例を示します。次の機能を実現するための簡単な名簿アプレットです。
連絡先を入力します。各連絡先レコードには、名前と携帯電話番号の2つのフィールドがあり、携帯電話番号をキーとしてlocalStorageに保存されます。
携帯電話番号に応じて、所有者を見つけるか削除します。
現在保存されているすべての連絡先情報を一覧表示します。
コードは次のように表示されます。
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<title>HTML5本地存储之WebStorage例子</title>
<script>
//调用函数
//loadAll();
//保存数据
function save(){
var user_name = document.getElementById("user_name").value;
var mobilephone = document.getElementById("mobilephone").value;
localStorage.setItem(mobilephone,user_name);
loadAll();
}
//将所有存储在localStorage中的对象提取出来，并展现到界面上
function loadAll(){
var list = document.getElementById("list");
if(localStorage.length>0){
var result = "<table border='1'>";
result += "<tr><td>姓名</td><td>手机号码</td></tr>";
for(var i=0;i<localStorage.length;i++){
var mobilephone = localStorage.key(i);
var name = localStorage.getItem(mobilephone);
result += "<tr><td>"+name+"</td><td>"+mobilephone+"</td></tr>";
}
result += "</table>";
list.innerHTML = result;
}else{
list.innerHTML = "目前数据为空，赶紧开始加入联系人吧";
}
}
//查找数据
function find(){
var search_phone = document.getElementById("search_phone").value;
var name = localStorage.getItem(search_phone);
var find_result = document.getElementById("find_result");
find_result.innerHTML = search_phone + "的机主是：" + name;
}
//删除数据
function del(){
//window.localStorage.clear(); //删除全部数据
var search_phone = document.getElementById("search_phone").value;
localStorage.removeItem(search_phone);// 查找键值对删除
loadAll();
}
</script>
</head>
<body onload="loadAll()">
<h3><center>简单的通讯录<center></h3>
<hr color="#666666">
<div style="border: 2px dashed #ccc;width:320px;text-align:center;">
<label for="user_name">姓名：</label>
<input type="text" id="user_name" name="user_name" class="text"/>
<br/>
<label for="mobilephone">手机：</label>
<input type="text" id="mobilephone" name="mobilephone"/>
<br/>
<input type="button" onclick="save()" value="新增记录"/>
<hr/>
<label for="search_phone">输入手机号：</label>
<input type="text" id="search_phone" name="search_phone"/>
<input type="button" onclick="find()" value="查找机主"/>
<input type="button" onclick="del()" value="删除记录"/>
<p id="find_result"><br/></p>
</div>
<br/>
<div id="list">
</div>
<br/>
<dividdivid="list">
</div>
</body>
</html>ファイルをWebStorageA.htmlとして保存し、フォルダー（ディレクトリ）に配置し（ここではD：\ webの練習です。実際の状況に応じて決定できます）、ブラウザーでiframeDemo.htmlを開くと、表示効果は次のようになります。 ：
2つの新しい連絡先レコードが追加されました。
WebSQLデータベース
Web SQLデータベースAPIはHTML5仕様の一部ではありませんが、SQLを使用してクライアントデータベースを操作するための一連のAPIを導入する独立した仕様です。ローカルデータベースを操作するには、mysqlクエリと同様のクエリステートメントを使用します。
ブラウザがこの機能をサポートしているかどうかを確認します
if（window.openDatabase）{
alert（ '現在のブラウザはwebSQLをサポートしています！'）;
} そうしないと {
alert（ '現在のブラウザはwebSQLをサポートしていません!!!'）;
}
コアメソッド：
①openDatabase：このメソッドは、既存のデータベースまたは新しく作成されたデータベースを使用してデータベースオブジェクトを作成します。
// openDatabase（）メソッドに対応する5つのパラメーターは、データベース名、バージョン番号、説明テキスト、データベースサイズ、作成コールバックです。
var db = openDatabase（ 'mydb'、 '1.0'、 'Test DB'、2 * 1024 * 1024、fn）;
openDatabaseメソッドは、既存のデータベースを開きます。データベースが存在しない場合は、データベースを作成することもできます。いくつかのパラメーターの意味は次のとおりです。
1.データベース名。
2.データベースのバージョン番号。現時点では、1.0を渡すだけで十分ですが、もちろん、入力する必要はありません。
3.データベースの説明。
4.割り当てられたデータベースのサイズを設定します（単位はkbです）。
5.コールバック関数（省略可能）。データベースは、最初に呼び出されたときに作成され、その後接続が確立されます。
②トランザクション：この方法では、トランザクションを制御し、この状況に基づいてコミットまたはロールバックを実行できます。
//トランザクションを開始します
database.transaction（function（sql）{
//ここでデータベースの追加と削除を操作して確認します
}）;
トランザクションメソッドはコールバック関数を設定できます。この関数は、開いたトランザクションのオブジェクトであるパラメーターを受け入れることができます。次に、このオブジェクトを介してSQLスクリプトを実行できます。これは、次の手順と組み合わせることができます。
③executeSql：このメソッドは、実際のSQLクエリを実行するために使用されます。
ts.executeSql（sqlQuery、[value1、value2 ..]、dataHandler、errorHandler）
パラメータの説明：
qlQuery：具体的に実行する必要のあるsqlステートメント。作成、選択、更新、削除が可能です。
value1、value2 ..]：sqlステートメントで使用されるすべてのパラメーターの配列。executeSqlメソッドで、s>ステートメントで使用されるパラメーターを「？」に置き換えてから、これらのパラメーターを配列内の配列に配置します。 2番目のパラメーター
ataHandler：実行が成功するとコールバック関数が呼び出され、この関数を使用してクエリ結果セットを取得できます。
errorHandler：実行が失敗したときに呼び出されるコールバック関数。
これがデモ（ブラウザコンソールで実行）です。コードは次のとおりです。
// 打开|创建DB
var db = openDatabase('corp', '1.0', 'corporation info', 2 * 1024);
// 创建数据表
db.transaction(function (tx) {
tx.executeSql('create table if not exists corporation (id unique, name)');
});
// 新增数据行
db.transaction(function (tx) {
tx.executeSql('insert into corporation (id, name) values (1, "Baidu")');
tx.executeSql('insert into corporation (id, name) values (?, ?)', [2, 'Alibaba']);
tx.executeSql('insert into corporation (id, name) values (3, "Tencent")');
});
// 查询
db.transaction(function(tx) {
/*tx.executeSql(SQL语句, SQL参数列表, func, null);*/
tx.executeSql('select * from corporation', [], function(tx, results) {
var len = results.rows.length;
console.log('记录条数：', len);
for (var i = 0; i < len; i++) {
var record = results.rows.item(i);
console.log(record.id, record.name);
}
}, null);
});
// 删除
db.transaction(function(tx) {
/*tx.executeSql('delete from corporation where id = ?', [id]);*/
tx.executeSql('delete from corporation where id = 1');
});
// 更新
db.transaction(function(tx) {
tx.executeSql('update corporation set name = ? where id = ?', ['Ali', 2])
});
ブラウザを開き（ここではエッジブラウザが使用されています）、F12キーを押してコンソール（コンソール）で実行します。次の図を参照してください：
IndexedDB
HTML5の一部としてW3Cによって尊重されているIndexedDB（IndexedDB）は、豊富なローカルストレージデータを使用してデータ集約型のオフラインHTML5Webアプリケーションを作成するのに非常に役立ちます。また、データをローカルにキャッシュするのに役立ち、従来のオンラインWebアプリケーション（モバイルWebアプリケーションなど）の実行と応答を高速化できます。
indexedDBは、ブラウザに付属する軽量のNOSQLデータベースです。Web Sqlと比較すると、インデックス作成、トランザクション処理、クエリ機能など、より効率的です。HTML5ローカルストレージでは、IndexedDBがほとんどのデータを保存します。
IndexedDBの全体的な構造：
その中で、DBはデータベースであり、Object Storeはデータテーブルであり、temはテーブル内のレコードと同じです。
IndexedDBを使用するhttps://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API/Using_IndexedDBを参照してください
indexedDBデータベースのサンプルコードを以下に示します。
<!DOCTYPE html>
<html>
<head>
<script>
window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB ||
window.msIndexedDB;
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction ||
window.msIDBTransaction;
window.IDBKeyRange = window.IDBKeyRange|| window.webkitIDBKeyRange ||
window.msIDBKeyRange;
window.IDBCursor = window.IDBCursor || window.webkitIDBCursor || window.msIDBCursor;
const dbName = 'indexedDBTest'; //数据库名
const dbVersion = 20180408; //版本号
let idb;
function window_onload(){
document.getElementById("btnSaveData").disabled=true;
document.getElementById("btnSearchData").disabled=true;
}
function ConnectDataBase(){
/*连接数据库，dbConnect对象为一个IDBOpenDBRequest对象，代表数据库连接
的请求对象*/
let dbConnect = indexedDB.open(dbName, dbVersion);
dbConnect.onsuccess = function(e){//连接成功
idb = e.target.result; //引用IDBDatabase对象
alert('数据库连接成功');
document.getElementById("btnSaveData").disabled=false;
};
dbConnect.onerror = function(){
alert('数据库连接失败');
};
dbConnect.onupgradeneeded = function(e){
//数据库版本更新
//e.target.result为一个IDBDatabase对象，代表连接成功的数据库对象
idb = e.target.result;
/*e.target.transaction属性值为一个IDBTransaction事务对象，此处代表
版本更新事务*/
let tx = e.target.transaction;
let name = 'Users2';
let optionalParameters = {
keyPath: 'userId',
autoIncrement: false
};
let store = idb.createObjectStore(name, optionalParameters);
alert('对象仓库创建成功');
name = 'userNameIndex';
keyPath = 'userName';
optionalParameters = {
unique: false,
multiEntry: false
};
let idx = store.createIndex(name, keyPath, optionalParameters);
alert('索引创建成功');
};
}
function SaveData(){
//开启事务
let tx = idb.transaction(['Users2'],'readwrite');
tx.oncomplete = function(){
alert('保存数据成功');
document.getElementById("btnSearchData").disabled=false;
}
tx.onabort = function(){alert('保存数据失败'); }
let store = tx.objectStore('Users2');
let value = {
userId: 1,
userName: '用户D',
address: '住址1'
};
store.put(value);
value = {
userId:3,
userName: '用户C',
address: '住址2'
};
store.put(value);
value = {
userId: 5,
userName: '用户B',
address: '住址3'
};
store.put(value);
value = {
userId: 7,
userName: '用户A',
address: '住址4'
};
store.put(value);
}
function SearchData(){
//开启事务
let range = IDBKeyRange.lowerBound('用户A');
let tx = idb.transaction(['Users2'],'readonly');
let store = tx.objectStore('Users2');
let req = store.getKey(IDBKeyRange.bound(2,10));
req.onsuccess = function(){
alert('检索到一条数据，数据主键值为'+this.result);
}
req.onerror = function(){
alert('检索数据失败');
}
}
</script>
</head>
<body onload="window_onload()">
<input id="btnConnectDataBase" type="button" value="连接数据库"
onclick="ConnectDataBase();"/>
<input id="btnSaveData" type="button" value="保存数据" onclick="SaveData();"/>
<input id="btnSearchData" type="button" value="检索数据" onclick="SearchData();"/>
</body>
</html>ブラウザを開き（ここではエッジブラウザが使用されています）、F12キーを押してコンソール（コンソール）で実行します。次の図を参照してください：
付録、localstorageフォルダーはどこにありますか？
Google Chromeの場合、Chromeブラウザを起動し、ChromeブラウザのアドレスバーにChrome：Versionと入力します
Microsoft Edgeブラウザーの場合、Edgeブラウザーを起動し、Chromeブラウザーのアドレスバーにedge：Versionと入力します。
ブラウザで表示する場合は、デバッグツール（F12）を開くと、[アプリケーション]タブで表示できます。