JavaScript におけるローカル ストレージ、セッション ストレージ、Cookie の違い

JavaScript は、クライアント側にデータを保存するための 3 つのメカニズム (Cookie、セッション ストレージ、ローカル ストレージ) を提供します。 それぞれのメカニズムには長所と短所があります。

ローカル ストレージは最新のメカニズムです。大量のデータを保存できますが、ブラウザを閉じてもデータは削除されません。ローカル ストレージは、オフライン データなど、ユーザーが後でアクセスする必要があるデータを保存するのに役立ちます。

セッション ストレージCookie に似ていますが、データは現在のセッションに対してのみ保存されます。これは、ユーザーがブラウザを閉じるとデータが削除されることを意味します。セッション ストレージは、ログイン資格情報などの機密データを保存するのに役立ちます。

Cookie は最も古く、最も有名なメカニズムです。使い方は簡単で、ブラウザで十分にサポートされています。ただし、データは 4 KB に制限されており、ユーザー設定などの機密性の低いデータの保存によく使用されます。

このチュートリアルでは、それぞれについて詳しく説明します。

ローカル ストレージ

最近のほとんどの Web アプリケーションでは、ユーザー名、配送先住所、または単なる環境設定など、何らかのユーザー入力が必要です。通常、その入力は処理と保存のためにどこかのサーバーに送信されます。しかし、アプリケーションでデータをユーザーのコンピュータにローカルに保存する必要がある場合はどうなるでしょうか?ここでローカル ストレージが登場します。

ローカル ストレージは、JavaScript がブラウザ内でデータを直接保存し、アクセスできるようにする Web ストレージの一種です。これは、環境設定や設定など、ユーザーがブラウザを閉じても保持しておきたいデータを保存する場合に特に便利です。

ローカル ストレージ内のデータは、キーと値のペアで保存されます。キーはデータの名前のようなもので、値は実際のデータそのもののようなものです。これは JavaScript の変数と考えることができます。データをローカル ストレージに保存するには、まずキーを作成する必要があります。その後、そのキーの下に必要なデータを保存できます。

キーを作成するには、setItem() メソッドを使用します。このメソッドは 2 つのパラメータを受け取ります。1 つ目はキー、2 つ目は保存される値です。

localStorage.setItem('key', 'value');

キーを取得したので、必要なデータをそのキーに保存できます。保存するデータは、文字列、数値、オブジェクト、配列など、JavaScript でサポートされている任意のデータ型にすることができます。

データを保存するには、setItem() メソッドを再度使用します。今回は、キーを最初のパラメーターとして渡し、保存するデータを 2 番目のパラメーターとして渡します。

localStorage.setItem('key', 'value');

ローカル ストレージからデータを取得するには、getItem() メソッドを使用します。このメソッドはキーをパラメータとして受け取り、そのキーの下に保存されているデータを返します。

localStorage.getItem('key');

ローカル ストレージから項目を削除する場合は、removeItem() メソッドを使用します。このメソッドはパラメータとしてキーを受け取り、そのキーの下に保存されているデータを削除します。

localStorage.removeItem('key');

セッション ストレージ

セッション ストレージは、Web アプリケーションがユーザーのブラウザにデータをローカルに保存できるようにする Web ストレージの一種です。 Cookie とは異なり、セッション ストレージに保存されるデータはそれを作成したサイトに固有のものであり、他のサイトとデータが共有されることはありません。

セッション ストレージは、HTML5 で導入された新機能で、データをユーザーのブラウザにローカルに保存できるようにします。 Cookie とは異なり、セッション ストレージに保存されるデータはそれを作成したサイトに固有のものであり、他のサイトとデータが共有されることはありません。

セッション ストレージは、アプリケーションのクライアント側にデータを保存する方法です。に似ています ローカル ストレージですが、いくつかの重要な違いがあります -

• セッション ストレージ データは、それを作成したサイトでのみ利用できます。

< li>

セッション ストレージ データは他のサイトと共有されません。

• セッション ストレージ データは永続的ではありません。つまり、ユーザー セッション中にのみ使用できます。

• セッション ストレージ データは、それを作成したブラウザ タブに固有です。

セッション ストレージは、クライアントとサーバー間で転送する必要があるデータの量を削減することで、Web アプリケーションのパフォーマンスを向上させる優れた方法です。データはサードパーティの Web サイトからアクセスできる Cookie に保存されないため、より安全な方法でデータを保存するためにも使用できます。

Web アプリケーションでセッション ストレージを使用するには、sessionStorage オブジェクトを使用する必要があります。このオブジェクトは、現在のセッション ストレージへのアクセスを提供します。

sessionStorage オブジェクトには 2 つのメソッドがあります

setItem() - このメソッドは、キーと値のペアのセッション ストレージを設定します。

sessionStorage.setItem("name", "tutorialsPoint");

getItem() - このメソッドは、セッション ストレージからキーの値を取得します。

var name = sessionStorage.getItem("name");

sessionStorage オブジェクトには他のプロパティもあります -

• length - このプロパティは、セッション ストレージ内のキーと値のペアの数を返します。

• key() - このメソッドはインデックスをパラメータとして受け取り、セッション ストレージ内のそのインデックスにあるキーを返します。

  セッション ストレージは、Web アプリケーションのパフォーマンスを向上させ、より安全な方法でデータを保存するための優れた方法です。

Cookie

Cookie 是存储在用户计算机上的一小段数据。 Cookie 用于存储有关用户的信息，例如用户的姓名、密码和偏好设置。

Cookie 是使用 document.cookie 属性创建的。此属性用于设置、获取和删除 Cookie。

设置 Cookie

使用 setItem() 方法设置 Cookie。该方法接受两个参数，cookie的名称和cookie的值。

cookie的名称用于标识cookie，值是要存储在cookie中的信息。 cookie。

以下代码设置一个名为“name”和值“tutorialsPoint”的 cookie。

document.cookie = "name=tutorialsPoint";

读取 Cookie

使用 getItem() 方法读取 Cookie。此方法接受 cookie 的名称作为参数并返回 cookie 的值。

如果 cookie 不存在，getItem() 方法将返回 null。< /p>

以下代码读取“name”cookie 并将值存储在“user”变量中。

var user = document.cookie.getItem("name");

与本地存储和会话存储相比，cookie 的一个优点是它们可以设置为在特定时间过期，这使得它们成为存储不应长期保留的数据（例如会话 ID）的不错选择。

本地存储、会话存储和 Cookie 之间的区别

下表突出显示了本地存储、会话存储和 Cookie 之间的主要区别 -

本地存储	会话存储	Cookie
允许存储10MB的数据。	允许存储5MB的数据。	存储容量限制为4KB数据。
关闭浏览器时不会删除存储的数据。	存储数据仅用于会话并会在浏览器关闭时被删除。	数据可以设置为在某个时间过期。
本地存储对于存储用户稍后需要访问的数据，例如离线数据。	会话存储是提高 Web 应用程序性能的好方法。	Cookie 是一个不错的选择用于存储不应该长时间保留的数据，例如会话 ID。
这对于存储即使用户关闭也希望保留的数据特别有用浏览器，例如首选项或设置。	会话存储对于存储敏感数据（例如登录凭据）非常有用。	Cookie 通常用于存储不敏感的数据，例如用户偏好
本地存储是HTML5中引入的新功能	会话存储是HTML5中引入的新功能HTML5	Cookie 是最古老的 (HTML4) 和最著名的机制。
数据是不随客户端请求发送到服务器。	数据不随客户端请求发送到服务器	数据随客户端请求发送到服务器
数据存储在浏览器和系统上。	数据仅存储在浏览器上。	数据仅存储在浏览器上。

结论

在本教程中，我们讨论了本地存储、会话存储之间的区别和饼干。我们已经看到了从该存储中存储和检索数据的不同方法。 本地存储是最新的机制。它允许存储更大量（10MB）的数据，但关闭浏览器时数据不会被删除。 会话存储与cookie类似，但仅存储当前会话的数据。这意味着当用户关闭浏览器时数据将被删除。 Cookie 是最古老、最著名的机制。它们使用简单并且受到浏览器的良好支持。但是，它们仅限于 4KB 的数据，并且通常用于存储不敏感的数据，例如用户首选项。

以上がJavaScript におけるローカル ストレージ、セッション ストレージ、Cookie の違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。