JavaScript でのマスター データ ストレージとローカル データベース
JavaScript でデータ ストレージとローカル データベースを習得するには、具体的なコード例が必要です。
近年、インターネットの急速な発展とスマート デバイスの普及により、データ ストレージの重要性がますます高まっています。そして管理は重要な技術要件の 1 つとなっています。 JavaScript では、一般的な Cookie、Web Storage、IndexedDB など、データの保存方法は非常に多様です。これらのデータ ストレージ方法を理解して習得することは、アプリケーションの開発と管理をより効率的に行うのに役立ちます。
以前の記事では、JavaScript の Cookie と Web ストレージについて詳しく紹介しましたが、この記事では、より強力で複雑なローカル データベースである IndexedDB に焦点を当てます。
IndexedDB は、ブラウザーでデータベースを作成および管理するための API であり、データを保存および取得するための非常に強力かつ柔軟な方法を提供します。 IndexedDB は、非リレーショナル データベースのデータ構造を使用します。このデータベースでは、データがキーと値のペアの形式で保存され、インデックスの作成とクエリがサポートされます。
以下では、特定のコード例を使用して、IndexedDB を使用してブラウザーでデータベースを作成し、データの追加、削除、変更、クエリ操作を実行する方法を示します。
まず、HTML ページを作成し、IndexedDB を操作するためのボタンとデータを表示するコンテナを追加する必要があります。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>IndexedDB Demo</title> </head> <body> <button id="addButton">增加数据</button> <button id="deleteButton">删除数据</button> <button id="updateButton">更新数据</button> <button id="queryButton">查询数据</button> <div id="resultContainer"></div> <script src="main.js"></script> </body> </html>
次に、JavaScript ファイル main.js コードを記述して IndexedDB データベースを作成し、データの追加、削除、更新、クエリの操作を実行できます。
// 打开或创建一个名为MyDatabase的IndexedDB数据库
var request = indexedDB.open("MyDatabase", 1);
// 如果数据库不存在，则创建
request.onupgradeneeded = function(event) {
var db = event.target.result;
var objectStore = db.createObjectStore("users", { keyPath: "id" });
objectStore.createIndex("name", "name", { unique: false });
};
// 数据库创建成功后的回调函数
request.onsuccess = function(event) {
var db = event.target.result;
// 增加数据
document.getElementById("addButton").onclick = function() {
var transaction = db.transaction(["users"], "readwrite");
var objectStore = transaction.objectStore("users");
var user = { id: 1, name: "John Doe", age: 25 };
var request = objectStore.add(user);
request.onsuccess = function(event) {
console.log("Data added successfully");
};
request.onerror = function(event) {
console.log("Error adding data");
};
};
// 删除数据
document.getElementById("deleteButton").onclick = function() {
var transaction = db.transaction(["users"], "readwrite");
var objectStore = transaction.objectStore("users");
var request = objectStore.delete(1);
request.onsuccess = function(event) {
console.log("Data deleted successfully");
};
request.onerror = function(event) {
console.log("Error deleting data");
};
};
// 更新数据
document.getElementById("updateButton").onclick = function() {
var transaction = db.transaction(["users"], "readwrite");
var objectStore = transaction.objectStore("users");
var request = objectStore.put({ id: 1, name: "Jane Doe", age: 30 });
request.onsuccess = function(event) {
console.log("Data updated successfully");
};
request.onerror = function(event) {
console.log("Error updating data");
};
};
// 查询数据
document.getElementById("queryButton").onclick = function() {
var transaction = db.transaction(["users"], "readonly");
var objectStore = transaction.objectStore("users");
var request = objectStore.get(1);
request.onsuccess = function(event) {
var user = event.target.result;
var resultContainer = document.getElementById("resultContainer");
resultContainer.innerHTML = "Name: " + user.name + ", Age: " + user.age;
};
request.onerror = function(event) {
console.log("Error querying data");
};
};
};
// 数据库创建失败后的回调函数
request.onerror = function(event) {
console.log("Error creating database");
};上記のコードを通じて、データの追加、削除、更新、クエリを実装します。クエリデータ操作。ユーザーがボタンをクリックすると、対応するアクションがトリガーされて実行されます。
この簡単な例を通して、IndexedDB がローカル データベースとして、JavaScript で幅広い機能と柔軟な操作を提供することがわかります。 IndexedDB に習熟すると、大量のデータのストレージとクエリ プロセスを最適化できるだけでなく、アプリケーションの応答速度とユーザー エクスペリエンスも向上させることができます。
要約すると、具体的なコード例を通じて、JavaScript でデータの保存と管理に IndexedDB を使用する方法を学びました。ただし、IndexedDB を使用するには、ブラウザーの互換性を考慮するだけでなく、より深い理解と実践が必要です。実際の開発では、最高のパフォーマンスとユーザー エクスペリエンスを実現するために、特定のニーズに応じて適切なデータ ストレージ方法を選択する必要があります。
以上がJavaScript でのマスター データ ストレージとローカル データベースの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7652
15
1393
52
91
11
37
110
WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法
Dec 17, 2023 pm 02:54 PM
WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 はじめに: 技術の継続的な発展により、音声認識技術は人工知能の分野の重要な部分になりました。 WebSocket と JavaScript をベースとしたオンライン音声認識システムは、低遅延、リアルタイム、クロスプラットフォームという特徴があり、広く使用されるソリューションとなっています。この記事では、WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法を紹介します。
localstorage がデータを正常に保存できないのはなぜですか?
Jan 03, 2024 pm 01:41 PM
localstorage へのデータの保存が常に失敗するのはなぜですか?特定のコード例が必要 フロントエンド開発では、ユーザー エクスペリエンスを向上させ、その後のデータ アクセスを容易にするために、ブラウザー側にデータを保存する必要があることがよくあります。 Localstorage は、クライアント側のデータ ストレージ用に HTML5 によって提供されるテクノロジであり、データを保存し、ページが更新または閉じられた後にデータの永続性を維持するための簡単な方法を提供します。ただし、データ ストレージにローカルストレージを使用すると、
WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー
Dec 17, 2023 pm 05:30 PM
WebSocketとJavaScript：リアルタイム監視システムを実現するためのキーテクノロジー はじめに： インターネット技術の急速な発展に伴い、リアルタイム監視システムは様々な分野で広く利用されています。リアルタイム監視を実現するための重要なテクノロジーの 1 つは、WebSocket と JavaScript の組み合わせです。この記事では、リアルタイム監視システムにおける WebSocket と JavaScript のアプリケーションを紹介し、コード例を示し、その実装原理を詳しく説明します。 1.WebSocketテクノロジー
JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法
Dec 17, 2023 pm 12:09 PM
JavaScript と WebSocket を使用してリアルタイム オンライン注文システムを実装する方法の紹介: インターネットの普及とテクノロジーの進歩に伴い、ますます多くのレストランがオンライン注文サービスを提供し始めています。リアルタイムのオンライン注文システムを実装するには、JavaScript と WebSocket テクノロジを使用できます。 WebSocket は、TCP プロトコルをベースとした全二重通信プロトコルで、クライアントとサーバー間のリアルタイム双方向通信を実現します。リアルタイムオンラインオーダーシステムにおいて、ユーザーが料理を選択して注文するとき
WebSocketとJavaScriptを使ったオンライン予約システムの実装方法
Dec 17, 2023 am 09:39 AM
WebSocket と JavaScript を使用してオンライン予約システムを実装する方法 今日のデジタル時代では、ますます多くの企業やサービスがオンライン予約機能を提供する必要があります。効率的かつリアルタイムのオンライン予約システムを実装することが重要です。この記事では、WebSocket と JavaScript を使用してオンライン予約システムを実装する方法と、具体的なコード例を紹介します。 1. WebSocket とは何ですか? WebSocket は、単一の TCP 接続における全二重方式です。
JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築
Dec 17, 2023 pm 05:13 PM
JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 はじめに: 今日、天気予報の精度は日常生活と意思決定にとって非常に重要です。テクノロジーの発展に伴い、リアルタイムで気象データを取得することで、より正確で信頼性の高い天気予報を提供できるようになりました。この記事では、JavaScript と WebSocket テクノロジを使用して効率的なリアルタイム天気予報システムを構築する方法を学びます。この記事では、具体的なコード例を通じて実装プロセスを説明します。私たちは
簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法
Jan 05, 2024 pm 06:08 PM
JavaScript チュートリアル: HTTP ステータス コードを取得する方法、特定のコード例が必要です 序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータス コードを取得して操作が成功したかどうかを判断し、さまざまなステータス コードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用
datファイルとはどのような種類のファイルですか?
Feb 19, 2024 am 11:32 AM
dat ファイルは、さまざまな種類のデータを保存するために使用できる汎用データ ファイル形式です。 dat ファイルには、テキスト、画像、オーディオ、ビデオなどのさまざまなデータ形式を含めることができます。さまざまなアプリケーションやオペレーティング システムで広く使用されています。 dat ファイルは通常、データをテキストではなくバイト単位で保存するバイナリ ファイルです。これは、dat ファイルを変更したり、その内容をテキスト エディターで直接表示したりできないことを意味します。代わりに、dat ファイルのデータを処理および解析するには、特定のソフトウェアまたはツールが必要です。 d
