localstorage を理解する: この謎のファイルの謎を解明する

LocalStorage の復号化: この謎のファイルは何ですか?

インターネットの発展に伴い、Web 開発がますます一般的になり、人々の個人情報やデータもブラウザーに広く保存されています。そして謎のファイルの 1 つは LocalStorage です。では、LocalStorage とは一体何なのでしょうか?この記事では、LocalStorage の原理と使用法を解読し、具体的なコード例を示します。

LocalStorage は、ブラウザーによって提供される Web ストレージ メカニズムであり、ブラウザー上でキーと値のペアのデータを保存および取得できます。従来の Cookie と比較して、LocalStorage はストレージ容量 (通常 5MB) が大きく、保存期間 (永久ストレージ) が長くなります。有効期限を設定しないと、LocalStorage データは常にユーザーのブラウザーに存在し、ブラウザーを閉じても消去されません。

LocalStorage の使用は非常に簡単です。 JavaScript を使用して LocalStorage を操作し、setItem() メソッドを通じてキーと値のペアのデータを設定し、getItem() メソッドを通じてデータを取得し、removeItem() メソッドを通じてデータを削除できます。以下は基本的なサンプル コードです:

// LocalStorage データを設定します
localStorage.setItem('name', 'David');
localStorage.setItem('age', '28') ;

// LocalStorage データを取得します
console.log(localStorage.getItem('name')); // 出力: David
console.log(localStorage.getItem('age')) ; // 出力: 28

// LocalStorage データの削除
localStorage.removeItem('name');
console.log(localStorage.getItem('name')); // 出力: null

LocalStorage は文字列型のデータだけでなく、数値やブール値などの他の基本的なデータ型も保存できます。 LocalStorage は、オブジェクトを JSON 形式に変換するだけで、オブジェクト タイプのデータを保存することもできます。サンプル コードは次のとおりです。

// Set LocalStorage object data
var user = {
name: 'David',
age: 28,
email: 'david@ example.com '
};
localStorage.setItem('user', JSON.stringify(user));

// LocalStorage オブジェクト データを取得する
var storageUser = JSON.parse( localStorage.getItem ('user'));
console.log(storedUser.name); // 出力: David
console.log(storedUser.age); // 出力: 28
console.log (storedUser.email); // 出力: david@example.com

LocalStorage データはドメイン名単位で保存され、異なるドメイン名の LocalStorage データは独立しています。これは、同じブラウザ内では、異なるドメイン名の Web ページは LocalStorage データを共有できないことを意味します。これはユーザーのプライバシーとセキュリティを保護するためです。

LocalStorage は、単にデータを設定して取得するだけでなく、データの変更を監視することもできます。 addEventListener() メソッドを使用して、変更イベント リスナーを LocalStorage に追加できます。LocalStorage 内のデータが変更されると、イベントがトリガーされます。サンプル コードは次のとおりです。

// LocalStorage データの変更を監視
window.addEventListener('storage', function(e) {
console.log('LocalStorage データの変更:', e .key, e.newValue);
});

// LocalStorage データの変更
localStorage.setItem('name', 'Emily');
// コンソール出力: LocalStorageデータ変更:name Emily

概要: LocalStorage は、ブラウザ上でデータを保存および取得できる、神秘的で強力な Web ストレージ メカニズムです。 LocalStorage の使用は非常に簡単で、setItem()、getItem()、removeItem() メソッドを通じてデータを簡単に操作できます。 LocalStorage データはドメイン名単位で保存され、異なるドメイン名の LocalStorage データは独立しています。 LocalStorage データの変更は、addEventListener() メソッドを通じて監視できます。 LocalStorage を使用すると、開発者はデータをより便利に保存および管理し、より優れたユーザー エクスペリエンスを提供できます。この記事が LocalStorage の復号化に役立つことを願っています。

以上がlocalstorage を理解する: この謎のファイルの謎を解明するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。