sessionStorage と localStorage

基本情報

sessionStorage は、ウィンドウまたはタブを閉じると削除される、同じウィンドウ (またはタブ) のデータを一時的に保存するために使用されます。
localStorage はデータの永続的な保存に使用され、同じオリジン (同じプロトコル、ドメイン名、およびポート) のページには異なるタブでアクセスできます。
ストレージ容量: sessionStorage と localStorage のストレージ容量は 5M で、ストレージの内容は文字列のみです
スコープ: sessionStorage のスコープは、同じオリジンのページが同じタブページでアクセスでき、localStorage も異なるタブページでアクセスできることです。

使い方

コード上で直接、全員が指摘する必要があります

let key = 'mykey';
// 只能存字符串
sessionStorage.setItem(key, JSON.stringify({
    
    a:1}));
let value = sessionStorage.getItem(key);
// 取出来的别忘了转换格式
value = JSON.parse(value);
// 反复存储
sessionStorage.setItem(key, 1);
value = sessionStorage.getItem(key);
// 就算是存数字也是会被存成字符串
value = Number(value);
// localStorage使用方式跟sessionStorage相同
localStorage.setItem(key, 1);
value = localStorage.setItem(key);

// 删除所有保存的数据
sessionStorage.clear();
localStorage.clear();

使用シーン

sessionStorage と localStorage はどちらも、ページがジャンプまたは更新されたときにデータが消去されないようにすることができるため、次のシナリオで使用できます。

ページが複数ある場合にページ A からページ B にジャンプするなど、ページ間のデータ転送に使用されます。
ページのレンダリング速度を高速化し、データはストレージに保存され、ページが更新されると、インターフェイスはストレージからデータを直接フェッチするように調整されません
localSotrage は、いくつかの基本的な情報など、初めてページに入ったときの状態を保存できます.次にページに入ると、最初にローカルに保存された情報を表示し、次にインターフェイスを呼び出してページを更新します。ユーザーの待ち時間
sessionStorage はページが閉じられるとデータを消去するため、一部の機密データ (アカウント情報など) を保存するために使用できます。localStorage は永続的に保存されるため、機密情報を保存することはできません。
base64 画像などの一部の操作も保存できますが、メモリをバーストしやすいため、メモリが多すぎるコンテンツはストレージに保存しないでください。

クッキー

基本情報

Cookieはユーザーキャッシュでもあり、主に重要な情報を保存するために使用されます
クッキーのサイズは4kbです
Cookieはリクエストされるたびにサーバーに送信されるため、リクエスト速度に影響します
クッキーの存在時間を設定することができ、長期間保存する必要のないクッキーは時間内に削除する必要があります
Cookie はサーバー側でも設定でき、主に過去にいくつかの固定パラメーターとトークンを渡すために使用されます (トークンは現在のページセッション認証に使用されます)。
Cookie が安全でない場合は、トークンを保存するために使用されます。ここでは、Cookie の保存機能についてのみ説明します。

使い方

// 直接拿到字符串
let cookie = document.cookie;
// cookie的内容是这样的 "a=1;b=2;c=3"
// 简单的示例获取a
let a = cookie.split(';')[0].spilt('=')[1];
// 赋值
document.cookie = "d=4";
// 执行后cookie="d=4;a=1;b=2;c=3"
// 下面的写法打乱了队形，不要那么写
document.cookie = "4";
// 执行后cookie="4;d=4;a=1;b=2;c=3"
// 删除cookie
document.cookie = "d=''";

使用シーン

不是场景非常特殊（比如很老的项目，已经用了）别用它，影响性能，存储空间小

インデックスDB

基本情報

IndexedDB は、大量の構造化データ (ファイル/バイナリラージオブジェクト (BLOB) も含む) をクライアント側に格納するための低レベル API です。
IndexedDB の主な特徴は、その大きなストレージスペースです, これにより、localStorage スペースが不足する問題が解決されます. 理論的には、ブラウザーが保存できる量と同じくらい保存できる可能性があり、数ギガバイトは小さいです
indexDB クエリは非同期です。つまり、ビッグデータをクエリする場合、非同期は js のイベントループをブロックしません。

使い方

indexDB の使い方はかなり複雑で、ブログではうまく説明できません. うまくやりたい場合は、実際のアプリケーションシナリオと組み合わせて、システムを学び、プラグインを自分でパッケージ化する必要があります. ここでは、使い方のアイデアだけ紹介

追加、削除、変更、およびチェックの基本的な方法をカプセル化します。より単純なものについては、サードパーティのプラグインを使用できます (下にマップがあります)。
indexDB には、バージョン情報とユーザー情報を格納するための特別なテーブルが必要です. 同時に、この情報を格納するために、サーバー上に特別なテーブルが必要です (json ファイルでもかまいません). indexDB を使用する前に、まず非常に現在のデータがサーバーを使用するかローカルを使用するかを確認するための高速インターフェイス
非同期操作のロジックを処理する必要がある. indexDB は非同期であるため, indexDB クエリとサーバークエリのタイミングを確保する必要がある. たとえば, indexDB データを最初にすばやく表示し, 次にリモートデータを呼び出してローカルを更新する場合インターフェイスが十分に高速な場合、データは indexDB よりも早く要求される可能性があり、タイミングに問題があります。
クライアントがキャッシュをクリアして初めてページに入ったときの状況を考慮する必要があります。
インターフェイスを離れるとき (sessionStorage の容量が足りないとき) に削除すべきデータに注意し、時間内にクリアする
基本的な使用方法 MDN の例を次に示します。

// 我们的客户数据看起来像这样。
const customerData = [
  {
    
     ssn: "444-44-4444", name: "Bill", age: 35, email: "[email protected]" },
  {
    
     ssn: "555-55-5555", name: "Donna", age: 32, email: "[email protected]" }
];
const dbName = "the_name";

var request = indexedDB.open(dbName, 2);

request.onerror = function(event) {
    
    
  // 错误处理
};
request.onupgradeneeded = function(event) {
    
    
  var db = event.target.result;

  // 建立一个对象仓库来存储我们客户的相关信息，我们选择 ssn 作为键路径（key path）
  // 因为 ssn 可以保证是不重复的
  var objectStore = db.createObjectStore("customers", {
    
     keyPath: "ssn" });

  // 建立一个索引来通过姓名来搜索客户。名字可能会重复，所以我们不能使用 unique 索引
  objectStore.createIndex("name", "name", {
    
     unique: false });

  // 使用邮箱建立索引，我们向确保客户的邮箱不会重复，所以我们使用 unique 索引
  objectStore.createIndex("email", "email", {
    
     unique: true });

  // 使用事务的 oncomplete 事件确保在插入数据前对象仓库已经创建完毕
  objectStore.transaction.oncomplete = function(event) {
    
    
    // 将数据保存到新创建的对象仓库
    var customerObjectStore = db.transaction("customers", "readwrite").objectStore("customers");
    customerData.forEach(function(customer) {
    
    
      customerObjectStore.add(customer);
    });
  };
};

詳細な調査を行いたい場合は、MDN アドレスを直接参照することをお勧めします。また、いくつかの便利なプラグインも推奨されています。（著者は本を読んだことがないので、私はお勧めしません）ブログの著者はたくさん読んでいますが、質はあまり良くありません。
ここに画像の説明を挿入

使用シーン

大前提は、顧客のプライバシーを漏らす機密データがないことです. データ量は十分に大きく、localStorage は十分ではありません. 必要がない場合は、ハンマーを使用しないでください.
gis プロジェクトでは、保存する地理情報データが多数あります.たとえば、静的な geojson は 10 メガバイト、数万のデータであり、オンデマンドで使用するために indexDB に保存できます。メガバイトのデータが繰り返し使用するために js に保存されます。ページが頻繁にクラッシュします
視覚的な大画面プロジェクト、多くの企業がビッグデータの視覚化を行います。多くの場合、内部使用のためです。指定されたサーバーのパフォーマンスは低く、インターフェースはしばしば非常に遅く、大量のデータをローカルに保存できます。 localStorage の利点はもちろん、より節約できることであり、社内で使用するため、基本的にすべての情報をそこに保存できます。
独自のアプリの h5 ページ。アプリは会社が所有しており、ローカルデータセキュリティが適切に行われているため、より多くのデータを安全かつ大胆にローカルに保存でき、h5 ページのパフォーマンスを最適化できます。
大規模なプラットフォームでは、転送する共有データがたくさんあります。ストレージは同じドメイン名で共有され、誰もがそこに物を保存し、時にはストレージスペースが爆破されるため、著者は豚のチームメイトに遭遇しましたbase64 を localStorage に保存した結果、作成者は保存したデータを見つけることができません。indexDBの容量は十分に大きいので、base64はもちろん、バイナリも格納できます。
これは非同期であるため、大量のデータをクエリするときのブロックを回避するために使用します。例えば、10万個のデータを取得する場合（使用する場所はすでにあります）、この時点で特定のものを取得する必要があります.jsを使用して同期的にフィルタリングすると、計算によってメインイベントループが確実にブロックされ、バックエンドインターフェイスを調整することもできますが、Web Worker、indexDB もソリューションとして使用でき、より良いソリューションがない場合にも適しています。

indexDBに関しては、筆者もいろいろ発見しているので、いろいろ書いたり、思いついたら追記したりします。

要約する

sessionStorage、localStorage、および indexDB はすべてユーザーキャッシュであり、同じオリジンのページで共有されます. 主な目的は、パフォーマンスを向上させ、パラメーターを渡すことです. 違いは、データの量、スコープ、およびライフサイクルにあります.
私の個人的な提案は、サーバーのパフォーマンスが優れている場合は、クライアントにあまり多くのデータを保存しないようにすることです.保存するデータが機密性を欠いていることを保証することはできません.保存するデータが多ければ多いほど、リスクは大きくなります. 最初に sessionStorage、次に localStorage、最後に indexDB を使用します。クッキーを使用するかどうか。

sessionStorage、localStorage、cookie、および indexDB アプリケーション

sessionStorage、localStorage、cookie、および indexDB アプリケーション

sessionStorage と localStorage

基本情報

使い方

使用シーン

クッキー

基本情報

使い方

使用シーン

インデックスDB

基本情報

使い方

使用シーン

要約する

おすすめ