今回は、H5 のローカル ストレージとローカル データベースについて詳しくご紹介します。H5 のローカル ストレージとローカル データベースを使用する際の 注意事項 について、実際の事例を見てみましょう。
ローカルストレージ
1.1 ローカルストレージの起源の背景
HTML4時代のCookieのサイズ、形式、保存データ形式の制限により、Webサイトアプリケーションがユーザーの情報の一部をローカルストレージに保存したい場合、ブラウザ側では Cookie のみを使用できます。ただし、Cookie のこれらの制限は、Cookie が ID などの識別子などの単純なデータのみを保存できることを意味します。
Cookie の制限は次のとおりです:
ほとんどのブラウザは、最大 4096 バイトの Cookie をサポートします。
ブラウザは、サイトがユーザーのコンピュータに保存できる Cookie の数も制限します。ほとんどのブラウザでは、サイトごとに 20 個の Cookie しか許可されません。それ以上の Cookie を保存しようとすると、最も古い Cookie が破棄されます。
一部のブラウザでは、すべてのサイトから受け入れる Cookie の総数に絶対的な制限 (通常は 300) が設定されています。
デフォルトでは、Cookie は HTTP リクエストとともにバックエンドサーバーに送信されますが、すべてのリクエストに Cookie が必要なわけではありません。たとえば、JS、CSS、画像などのリクエストには Cookie が必要ありません。
Cookie の一連の制限を打ち破るために、HTML5 は JS の新しい API を通じて大量のデータをクライアント ブラウザに直接保存できるようになり、複雑なローカル データベースをサポートして JS をより効率的にします。
html5 は 2 種類の WebStorage をサポートしています:
永続的なローカル ストレージ (localStorage)
セッション レベルのローカル ストレージ (sessionStorage)
1.2 永続的なローカル ストレージ: localStorage
最新の JS API に追加されました localStorage オブジェクトにより、ユーザーは簡単に保存できますウェブ側のデータを永続的に保存します。さらに、データは HTTP リクエストと一緒にバックエンド サーバーに送信されず、HTML5 標準ではブラウザが少なくとも 4MB をサポートする必要があるため、保存されるデータのサイズは基本的に考慮する必要がありません。 Cookie の制限を打ち破り、Web に優れたソリューションを提供します。このアプリケーションは、複雑なユーザー追跡データをローカルに保存して、非常に便利な技術サポートを提供します。次に、localStorageのよく使われるメソッドを紹介します。
localStorage は、ローカル ストレージ上で関連する操作を実行するのに役立つ 4 つのメソッドを提供します。
setItem(key,value) はローカル ストレージ データを追加します。 2 つのパラメータは非常に単純なので、詳細は説明しません。
getItem(key) は、キーを介して対応する値を取得します。
removeItem(key) はキーごとにローカルデータを削除します。
clear() はデータをクリアします。
コードは次のとおりです:
<script type="text/javascript">
//添加key-value 数据到 sessionStorage
localStorage.setItem("demokey", "http://www.shiyanlou.com");
//通过key来获取value
var dt = localStorage.getItem("demokey");
alert(dt);
//清空所有的key-value数据。
//localStorage.clear();
alert(localStorage.length);
</script>1.3 セッションレベルのローカルストレージ: sessionStorage
HTML5: sessionStorage に Js オブジェクトが追加されました。このオブジェクトを通じて、ブラウザに保存されているセッションレベルの WebStorage を直接操作できます。 sessionStorage に保存されるデータは、最初は Key-Value の形式であり、ブラウザの現在のセッションに関連付けられており、有効期限が設定されていない Cookie と同様に、セッションが終了するとデータは自動的に消去されます。 。 sessionStorage は、ローカル ストレージ上で関連する操作を実行する際に役立つ 4 つのメソッドを提供します。 setItem(key,value) はローカル ストレージ データを追加します。 2 つのパラメータは非常に単純なので、詳細は説明しません。 getItem(key) は、キーを介して対応する値を取得します。 removeItem(key) はキーごとにローカルデータを削除します。 clear() はデータをクリアします。 コードは次のとおりです:<script type="text/javascript">
//添加key-value 数据到 sessionStorage
sessionStorage.setItem("demokey", "http://blog.itjeek.com");
//通过key来获取value
var dt = sessionStorage.getItem("demokey");
alert(dt);
//清空所有的key-value数据。
//sessionStorage.clear();
alert(sessionStorage.length);
</script>ステップ 3: パスexecuteSql メソッドはクエリを実行します。もちろん、クエリは CRUD にすることができます。 次に、パラメータと関連メソッドの使用法を紹介します。 1.4.1 openDatabase メソッド//デモ: データベースが存在しない場合は、データベースを作成します
var dataBase = openDatabase(“student”, “1.0”, “学生表”, 1024 * 1024, function () { });
openDatabase メソッドは、データベースが存在しない場合、既存のデータベースを開きます。まだ
できます。いくつかのパラメータの意味は次のとおりです: データベース名。
データベースのバージョン番号。現在は 1.0 で十分です。もちろん、入力する必要はありません。
データベースの説明。
割り当てられるデータベースのサイズを設定します(単位はkb)。
コールバック関数(省略可能)。 初回通話時にデータベースを作成し、接続を確立します。
1.4.2 db.transaction方法
可以设置一个回调函数，此函数可以接受一个参数就是我们开启的事务的对象。然后通过此对象可以执行SQL脚本。
<head>
<script src="Scripts/jquery-1.5.1.js" type="text/javascript"></script>
<script type="text/javascript">
function initDatabase() {
var db = getCurrentDb();//初始化数据库
if(!db) {alert("您的浏览器不支持HTML5本地数据库");return;}
db.transaction(function (trans) {//启动一个事务，并设置回调函数
//执行创建表的Sql脚本
trans.executeSql("create table if not exists Demo(uName text null,title text null,words text null)", [], function (trans, result) {
}, function (trans, message) {//消息的回调函数alert(message);});
}, function (trans, result) {
}, function (trans, message) {
});
}
$(function () {//页面加载完成后绑定页面按钮的点击事件
initDatabase();
$("#btnSave").click(function () {
var txtName = $("#txtName").val();
var txtTitle = $("#txtTitle").val();
var txtWords = $("#txtWords").val();
var db = getCurrentDb();
//执行sql脚本，插入数据
db.transaction(function (trans) {
trans.executeSql("insert into Demo(uName,title,words) values(?,?,?) ", [txtName, txtTitle, txtWords], function (ts, data) {
}, function (ts, message) {
alert(message);
});
});
showAllTheData();
});
});
function getCurrentDb() {
//打开数据库，或者直接连接数据库参数：数据库名称，版本，概述，大小
//如果数据库不存在那么创建之
var db = openDatabase("myDb", "1.0", "it's to save demo data!", 1024 * 1024); ;
return db;
}
//显示所有数据库中的数据到页面上去
function showAllTheData() {
$("#tblData").empty();
var db = getCurrentDb();
db.transaction(function (trans) {
trans.executeSql("select * from Demo ", [], function (ts, data) {
if (data) {
for (var i = 0; i < data.rows.length; i++) {
appendDataToTable(data.rows.item(i));//获取某行数据的json对象
}
}
}, function (ts, message) {alert(message);var tst = message;});
});
}
function appendDataToTable(data) {//将数据展示到表格里面
//uName,title,words
var txtName = data.uName;
var txtTitle = data.title;
var words = data.words;
var strHtml = "";
strHtml += "<tr>";
strHtml += "<td>"+txtName+"</td>";
strHtml += "<td>" + txtTitle + "</td>";
strHtml += "<td>" + words + "</td>";
strHtml += "</tr>";
$("#tblData").append(strHtml);
}
</script>
</head>
<body>
<table>
<tr>
<td>用户名：</td>
<td><input type="text" name="txtName" id="txtName" required/></td>
</tr>
<tr>
<td>标题：</td>
<td><input type="text" name="txtTitle" id="txtTitle" required/></td>
</tr>
<tr>
<td>留言：</td>
<td><input type="text" name="txtWords" id="txtWords" required/></td>
</tr>
</table>
<input type="button" value="保存" id="btnSave"/>
<hr/>
<input type="button" value="展示所哟数据" onclick="showAllTheData();"/>
<table id="tblData">
</table>
</body>
</html>相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
相关阅读：
以上がH5 のローカル ストレージとローカル データベースの詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
