フロントエンドプロジェクトの開発において、フロントエンドローカルストレージは欠かせません。今日は、プロジェクトにおけるフロントエンドローカルストレージの使い方を詳しく紹介します。フロントエンドローカルストレージは主に
- cookie
- localStorage
- sessionStorage
- webSQL/indexDB
次のステップでは、これらの一般的なフロントエンドのストレージメソッドを紹介します。
cookie
クッキーは、クライアントに格納されているテキストの小さな断片であり、サイズは4kbを超えることはできません、要求のインターフェイスでは、クッキーが要求によって運ばれ、次に使用するサーバーによって読み取られます。ブラウザのコンソールを開き、F12>>アプリケーション>>クッキー、ランダムにドメインを選択すると、次のように、多くのクッキーがあることがわかります：
メイン・プロパティ
- Name
cookie
- Value
cookie値、最大4Kbのサイズ。
- Domain
cookieストアド・ドメイン
- Path
cookieストアド・パス
- Size
cookie
- Expires/Max-Age
これら2つの属性はクッキーの有効期限に関連します。
Expires プロパティは、ブラウザがクッキーを保持しなくなる特定の有効期限時間を指定し、その値は Date.prototype.toUTCString() フォーマットを使って変換できる UTC フォーマットです。
Max-Age プロパティは、クッキーがこれから存在する秒数を指定します。この時間を過ぎると、ブラウザはクッキーを保持しなくなります。
Max-Age は Expires よりも優先順位が高く、どちらも設定されていない場合、ブラウザが閉じられるとクッキーは失効します。
- HttpOnly
この属性が設定されている場合、このクッキーは JavaScript によって取得できないことを意味し、スクリプトによってクッキーが読み取られることも防ぎます。
- Secure
ブラウザが暗号化されたプロトコルHTTPSの下でのみクッキーを送信できることを指定します。
使用法
- クッキーの設定
/**
* クッキーを設定する
* @param {*} key
* @param {*} val
* @param {*} time 失敗時
*/
export const setCookie = (key, val, time) => {
var date = new Date();
var expiresDays = time;
//時刻をクッキーで設定された時刻のフォーマットに変換する
date.setTime(date.getTime() + expiresDays * 24 * 3600 * 1000);
document.cookie = key + "=" + val + ";expires=" + date.toDateString();
}
- GetCookie
/**
* GetCookie
* @param {*} key
*/
export const getCookie = (key) => {
var getCookie = document.cookie.replace(/[ ]/g, "");
var arrCookie = getCookie.split(";")
var tips;
for (var i = 0; i < arrCookie.length; i++) {
var arr = arrCookie[i].split("=");
if (key == arr[0]) {
tips = arr[1];
break;
}
}
return tips;
}
- クッキー削除
クッキーを削除するには、次のように、クッキーを設定するメソッドを直接呼び出して、有効期限を-1に設定します：
setCookie(key,'',-1)localStorage/sessionStorage
localStorage/sessionStorageはhtml5で追加された新しい技術で、データの適時性が異なる以外はどちらも同じです。サイズは一般的に5MBで、ストレージはクライアント側にのみ保存され、リクエストの呼び出しとともにサーバーに渡されることはありません。
localStorage は手動で削除されなければ永久に有効ですが、 sessionStorage は現在のセッションでのみ有効です。
F12>>Application>>Cookiesの下に、ストレージの例があります：
キーと値の2つの属性しかないことがわかります。
使用法
localStorageもsessionStorageもsetItem、getItem、removeItemなどの操作メソッドは同じです：
- StorageStorage
setCookie(key,'',-1)
- GetStorage
/**
* ストレージ
*/
export const setStore = (params = {}) => {
let {
name,//
content,//内容
type,//
} = params;
let obj = {
dataType: typeof (content),
content: content,
type: type,
datetime: new Date().getTime()
}
if (type) window.sessionStorage.setItem(name, JSON.stringify(obj));
else window.localStorage.setItem(name, JSON.stringify(obj));
}
- 削除ストレージ
/**
* データベースが空かどうかを判定する
*/
function validatenull (val) {
if (typeof val === 'boolean') {
return false
}
if (typeof val === 'number') {
return false
}
if (val instanceof Array) {
if (val.length == 0) return true
} else if (val instanceof Object) {
if (JSON.stringify(val) === '{}') return true
} else {
if (val == 'null' || val == null || val == 'undefined' || val == undefined || val == '') return true
return false
}
return false
}
/**
* ストレージを取得する
*/
export const getStore = (params = {}) => {
let {
name,//
debug//型を変換するかどうか
} = params;
let obj = {},
content;
obj = window.sessionStorage.getItem(name);
if (validatenull(obj)) obj = window.localStorage.getItem(name);
if (validatenull(obj)) return;
try {
obj = JSON.parse(obj);
} catch{
return obj;
}
if (debug) {
return obj;
}
if (obj.dataType == 'string') {
content = obj.content;
} else if (obj.dataType == 'number') {
content = Number(obj.content);
} else if (obj.dataType == 'boolean') {
content = eval(obj.content);
} else if (obj.dataType == 'object') {
content = obj.content;
}
return content;
}
- GetAllStorage
/**
* ローカル・ストレージを削除する
*/
export const removeStore = (params = {}) => {
let {
name,
type
} = params;
if (type) {
window.sessionStorage.removeItem(name);
} else {
window.localStorage.removeItem(name);
}
}
- 全てのストレージを空にします
/**
* GetAllStorage
*/
export const getAllStore = (params = {}) => {
let list = [];
let {
type
} = params;
if (type) {
for (let i = 0; i <= window.sessionStorage.length; i++) {
list.push({
name: window.sessionStorage.key(i),
content: getStore({
name: window.sessionStorage.key(i),
type: 'session'
})
})
}
} else {
for (let i = 0; i <= window.localStorage.length; i++) {
list.push({
name: window.localStorage.key(i),
content: getStore({
name: window.localStorage.key(i),
})
})
}
}
return list;
}
cookielocalStorage、 sessionStorage および indexDB の類似点と相違点。
データ保存時間
- クッキーは有効期限を設定できます。
- localStorageはアクティブに消去されなければ永久です。
- sessionStorageは現在のページが閉じられると削除されます。
サイズ
- cookie 最大 4kb
- localStorage 最大5MB
- sessionStorage 最大5MB
リクエストが
- クッキーは各リクエストのリクエストヘッダに格納されます。
- localStorage 運ばれず、クライアント側にのみ保存されます。
- sessionStorage クライアント側にのみ保存されます。
使いやすさ
- cookieのネイティブapiは不親切。
- localStorageネイティブ・インターフェースを使うか、2回カプセル化することができます。
- sessionStorageネイティブインターフェイスを使うこともできますし、独自のセカンダリパッケージを使うこともできます。
私は個人的にプロジェクト内のストレージを使用することをお勧めします、クッキーストレージデータが多すぎる、それはパフォーマンスの問題を引き起こします。もちろん、実際の状況に応じて選択することができ、二次パッケージング方法に手を入れています。
webSQL/indexDB
単純なデータの保存には、ストレージとクッキーで十分ですが、より複雑なリレーショナルデータを格納する必要がある場合は、ストレージとクッキーを使用すると、それは少し多すぎます。今回はストレージにwebSQLかindexDBを使います。
webSQL
Web SQLデータベースAPIは、ブラウザレベルで構造化データのネイティブストレージを提供する別の仕様であり、多くの最新ブラウザでサポートされています。
コア API
- openDatabase() => データベースをオープンまたは作成するために使用します。
- transaction() => このメソッドは 1 つ以上のトランザクションを制御し、その状況に応じてコミットやロールバックを行います。
- executeSql() => 実際の SQL クエリを実行するために使用します。
ブラウザがこの機能をサポートしているかどうかを判断します
上の図からわかるように、webSQL の互換性はあまりよくありません。
/**
* すべてのストレージを空にする
*/
export const clearStore = (params = {}) => {
let { type } = params;
if (type) {
window.sessionStorage.clear();
} else {
window.localStorage.clear()
}
}
webSQL操作クラス・ラッパー
WebSQLの操作クラスのパッケージングコードが大きく、ここでは表示されません、あなたが取得するWebSQLの操作クラスに私の公開応答に従う必要があります。ここでは簡単な例です。
if (window.openDatabase) {
// 操作 web SQL
} else {
alert('現在のブラウザはwebSQLをサポートしていない !!!');
}
一般的に使用されるSQLステートメント：
var openRequest =window.indexedDB.open(name, version);
var db;
openRequest.onupgradeneeded = function(e) {
console.log("Upgrading...");}
openRequest.onsuccess = function(e) {
console.log("Success!");
db = e.target.result;
}
openRequest.onerror = function(e) {
console.log("Error");
console.dir(e);
}
indexDB
IndexedDB 標準は、HTML5 用のネイティブ データベース ソリューションとして公式に認められています。indexedDB は、ブラウザに付属する軽量の NOSQL データベースです。インデックス作成、トランザクション処理、クエリ機能など、Web Sqlに比べてより効率的です。
あなたは上の図からわかるようにindexDBの互換性はまだ良いです。
indexDB の使用法
データベースの作成/オープン
まず、データベース・オブジェクトを作成するか開く必要があります。window.indexedDB.open()メソッドを使用することができます：
db.createObjectStore("test", { keyPath: "email" });
db.createObjectStore("test2", { autoIncrement: true });
初めてデータベースを開くと、まずupgradeeneededイベントが発生し、次にsuccessイベントが発生します。
open メソッドは、コールバック関数が定義されたオブジェクトを返します。
コールバック関数は、イベントオブジェクト event をパラメータとして受け取り、target.result プロパティは開かれた IndexedDB データベースを指します。
データを格納する「オブジェクトリポジトリ」の作成
データベースオブジェクトは、データを格納するための "オブジェクトリポジトリ "を作成する必要があります：
var transaction = db.transaction(["firstOS"],"readwrite");
var store = transaction.objectStore("firstOS");
keyPathは、格納されたデータのキー名を意味し、autoIncrementは、キー名として自動インクリメント整数を使用するかどうかを意味します。一般的には、2つの属性のどちらか1つで十分です。
データベース・トランザクション・オブジェクトの作成
トランザクションメソッドは、データベーストランザクションを作成するために使用します。データベースにデータを追加するには、まずデータベーストランザクションを作成する必要があります。
トランザクション・メソッドは、objectStore メソッドが指定されたオブジェクト・ストアを取得するために使用されるトランザクション・オブジェクトを返します。
transaction.oncomplete = function(event) {
// some code
};
トランザクション・メソッドは、2 つのパラメータを受け入れます：
最初の引数は、関係するオブジェクト・ストアの配列です；
2番目の引数は、操作のタイプを示す文字列です。
トランザクションメソッドには、コールバック関数を定義するために使用できる3つのイベントがあります。
abort：トランザクションの中断、complete：トランザクションの完了、error：トランザクションのエラー。
var transaction = db.transaction(["firstOS"],"readwrite");
var store = transaction.objectStore("firstOS”);
var data = {name: 'monkey'};
var request = store.add(data,1);
request.onerror = function(e) {
console.log("Error",[e.target.error.name](http://...name));
}
request.onsuccess = function(e) {
console.log("データが正常に追加された！");
}
データの操作
トランザクションオブジェクトはデータを操作するためのいくつかのAPIを提供します。
- データの追加 add()
オブジェクトリポジトリを取得したら、add メソッドでデータを追加します。
var data = { name: 'monkeysoft' };
var request = store.put(data);
addメソッドの最初のパラメータは、追加するデータであり、2番目のパラメータは、このデータに対応するキー名は、上記のコードは、オブジェクトのキー名oは1に設定されます。
- updateData put()
var request = store.get(key);
- データの読み込み get()
var request = store.delete(key);
- データの削除 delete()
var request = store.clear();
- データベースのクリア clear()
var request = store.openCursor();
- データの反復処理 openCursor()
indexDB操作クラス・ラッパー
indexDB操作クラスのカプセル化コードは大きいですが、ここでは表示されません、パートナーの必要性は、私のパブリック返信indexDB操作クラスを取得するために集中することができます。
上記は、フロントエンドのローカルストレージといくつかの照合の私の理解であり、間違いがある場合は、子供たちを誤解させないように、お兄さんを修正するために歓迎〜hehehe。
この記事は、任意のエラーや提案を持っている場合、私はmonkeysoftですが、あなたの3つであっても、最大の力のmonkeysoftの作成は、メッセージを残すことを歓迎します！
この記事は 使用してタイプセットされました
