sessionstorage と localstorage の比較: フロントエンド データ ストレージ方式の比較

sessionStorage と localStorage: 2 つのフロントエンド データ ストレージ方法の比較、コード例

現代の Web アプリケーション開発では、データ ストレージが重要な問題です。さまざまなニーズを満たすために、フロントエンド開発者はさまざまなデータ ストレージ方法を使用することがよくあります。 Web ブラウザでは、sessionStorage と localStorage の 2 つが一般的に使用されるフロントエンド データ ストレージ メソッドです。

sessionStorage と localStorage は、HTML5 によって提供される 2 つのデータ ストレージ メソッドです。どちらも、後で使用するためにブラウザーにデータを保存できます。ただし、それらの間にはいくつかの重要な違いがあります。

まず第一に、sessionStorage はセッションレベルの永続ストレージ メソッドです。これは現在のセッション ウィンドウでのみ有効です。つまり、ユーザーがウィンドウを閉じると、データはクリアされます。これは、sessionStorage に保存されているデータは現在のウィンドウでのみ利用可能であり、ユーザーが Web サイトを再度開くと失われることを意味します。この保存方法は、Web サイト上でのユーザーの一時的な選択やステータスなどの一時的なデータの保存に適しています。

次に、sessionStorage を使用したコード例を示します。

// 将数据存储到sessionStorage
sessionStorage.setItem('username', 'John');

// 从sessionStorage读取数据
var username = sessionStorage.getItem('username');
console.log(username);  // 输出：John

// 从sessionStorage中移除数据
sessionStorage.removeItem('username');

// 清空sessionStorage中的所有数据
sessionStorage.clear();

対照的に、localStorage は永続的なストレージ メソッドであり、データをブラウザーに長期間保存できます。 sessionStorage とは異なり、localStorage に保存されたデータは、ユーザーがウィンドウを閉じたり、Web サイトを再度開いたりした後も有効なままです。このため、localStorage はユーザーの個人設定や永続的な構成データを保存するのに最適です。

localStorage を使用したコード例は次のとおりです:

// 将数据存储到localStorage
localStorage.setItem('theme', 'dark');

// 从localStorage读取数据
var theme = localStorage.getItem('theme');
console.log(theme);  // 输出：dark

// 从localStorage中移除数据
localStorage.removeItem('theme');

// 清空localStorage中的所有数据
localStorage.clear();

sessionStorage と localStorage の間には、永続性に加えて、他にもいくつかの違いがあります。

まず第一に、sessionStorage と localStorage は両方ともキーと値のペアのストレージに基づいています。また、データは文字列形式でのみ保存できます。他のデータ型を保存する必要がある場合は、まずデータを文字列に変換し、読み取り時にそれに応じて解析する必要があります。

第二に、この 2 つの範囲は異なります。 sessionStorage はブラウザ ウィンドウに基づいており、各ウィンドウには独自の独立した sessionStorage があります。 LocalStorage はドメイン名に基づいており、同じドメイン名にあるすべてのウィンドウは localStorage を共有します。

最後に、localStorage は永続的なストレージ メソッドであるため、そのストレージ容量は通常 sessionStorage よりも大きくなります。 sessionStorage のストレージ容量は通常約 5MB ですが、localStorage のストレージ容量は 10MB 以上に達する場合があります。

要約すると、sessionStorage と localStorage は、一般的に使用される 2 つのフロントエンド データ ストレージ メソッドです。これら 2 つの方法をオンデマンドで使用すると、開発者はより柔軟で効率的なデータの保存と配信を実現できます。アプリケーションのニーズをより適切に満たすには、特定のニーズに基づいて使用するストレージ方法を選択する必要があります。

以上がsessionstorage と localstorage の比較: フロントエンド データ ストレージ方式の比較の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。