目次
sessionStorage と localStorage の違い
セッションストレージ
導入
- sessionStorage はブラウザ セッション中にデータを保存するために使用され、データは現在のセッション中にのみ有効です。
- ユーザーがブラウザのタブまたはウィンドウを閉じると、保存されたデータは消去されます。
方法
- sessionStorage.setItem(key, value) メソッドを使用して、データを sessionStorage に保存します。
- sessionStorage.getItem(key) メソッドを使用して、キーに基づいて保存された値を取得します。
- sessionStorage.removeItem(key) メソッドを使用して、キーに基づいて保存された値を削除します。
コード例
列表页搜索条件缓存, 使用sessionStorage实现简单的功能,
存储数据+读取数据+清除数据個人データへのアクセス
sessionStorage.setItem("param", "我叫你一声你敢答应吗?");
let param = sessionStorage.getItem("param")
console.log(param ); // => 我叫你一声你敢答应吗?アクセスオブジェクト
sessionStorage也可存储Json对象：
存储时，通过JSON.stringify()将对象转换为文本格式；
读取时，通过JSON.parse()将文本转换回对象。
sessionStorage.setItem("queryParams", JSON.stringify(this.queryParams));
if (sessionStorage.getItem("queryParams")) {
this.queryParams = JSON.parse(sessionStorage.getItem("queryParams"));
}データをクリア
sessionStorage.removeItem("queryParams");ローカルストレージ
導入
- localStorage は、ブラウザーにデータを永続的に保存するために使用されます。ユーザーがブラウザーのタブまたはウィンドウを閉じても、データは残ります。
- 保存されたデータは、コードから明示的に削除されるか、ユーザーがブラウザのキャッシュをクリアしない限り、自動的に期限切れになりません。
- 保存データサイズは通常 5MB です。
- ブラウザにのみ保存され、サーバー通信には参加しません。
方法
- localStorage.setItem(key, value) メソッドを使用して、データを localStorage に保存します。
- localStorage.getItem(key) メソッドを使用して、キーに基づいて保存された値を取得します。
- localStorage.removeItem(key) メソッドを使用して、キーに基づいて保存された値を削除します。
コード例
// 设置localStorage中的数据
localStorage.setItem('key', 'value');
// 获取localStorage中的数据
const value = localStorage.getItem('key');
console.log(value); // 输出：value
// 删除localStorage中的数据
localStorage.removeItem('key');
クッキー
導入
- Cookie は、ユーザーを追跡および識別するためにブラウザーにデータを保存するメカニズムです。
- Cookie の有効期限を設定して、指定した時間が経過するとデータが無効になるようにすることができます。
- ユーザーがブラウザを閉じても、有効期限を設定しない限り、Cookie に保存されたデータは保持されます。
方法
- document.cookie プロパティを使用して、Cookie 値を設定および取得します。
- document.cookie = "key=value;expires=expiration_time;path=/;" 構文を使用して Cookie を設定します。
- すべての Cookie 値を取得するには、document.cookie を使用します。
- document.cookie = "key=;expires=expiration_time;path=/;" 構文を使用して Cookie を削除します。
コード例
// 设置cookie
document.cookie = "key=value; expires=expiration_time; path=/;";
// 获取所有cookie
const cookies = document.cookie;
console.log(cookies);
// 删除cookie
document.cookie = "key=; expires=expiration_time; path=/;";
違い
这些存储机制各有优劣和适用场景。
sessionStorage适用于在会话期间保持数据，
localStorage适用于需要永久存储数据的场景，
而Cookie用于跟踪用户和设置过期时间的需求。
根据具体的应用需求，选择适合的存储机制可以更好地管理和存储数据。sessionStorage と localStorage の違い
- sessionStorage はブラウザ セッション中に有効ですが、localStorage は永続的です。
- sessionStorage はユーザーがブラウザのタブまたはウィンドウを閉じるとクリアされますが、localStorage は常に保持されます。
- sessionStorage と localStorage の使用方法は似ており、いずれも setItem、getItem、removeItem メソッドを使用して動作します。
sessionStorage、localStorage、Cookieの違い
- sessionStorage はブラウザー セッションの間有効であり、localStorage は永続的であり、Cookie は有効期限を設定できます。
- 通常、sessionStorage と localStorage のストレージ容量は Cookie のストレージ容量よりもはるかに大きくなります。
- sessionStorage と localStorage の使用方法は似ており、どちらも setItem、getItem、removeItem メソッドを使用して操作するのに対し、Cookie は document.cookie 属性を使用します。
- sessionStorage と localStorage は文字列タイプのデータのみを保存できますが、Cookie は文字列、数値、ブール値、その他のタイプのデータを保存できます。
役に立ったら「いいね！」して、良い習慣を身につけてください！
ご質問、コミュニケーション、激励など、メッセージを残してください。