1282

すべての Cookie が同じ機能を持っているように見えるため、すべての Cookie をローカル ストレージに移動して、Web サイトの読み込み時間を短縮したいと考えています。明白な互換性の問題を除いて、Cookie 機能を置き換えるためにローカル ストレージを使用することに (特にパフォーマンスに関して) 長所/短所はありますか?

4

8 に答える 8

1603

Cookie とローカル ストレージは異なる目的を果たします。Cookie は主にサーバー側の読み取り用であり、ローカル ストレージはクライアント側のみが読み取ることができます。問題は、あなたのアプリで、誰がこのデータを必要とするかです — クライアントかサーバーか?

それがあなたのクライアント (あなたの JavaScript) なら、ぜひ切り替えてください。各 HTTP ヘッダーですべてのデータを送信することにより、帯域幅を浪費しています。

それがあなたのサーバーである場合、ローカルストレージはあまり役に立ちません。なぜなら、何らかの方法で (Ajax または非表示のフォームフィールドなどを使用して) データを転送する必要があるからです。サーバーが各リクエストの合計データの小さなサブセットのみを必要とする場合、これは問題ない可能性があります。

いずれにしても、セッション Cookie を Cookie のままにしておくことをお勧めします。

技術的な違いと私の理解によると：

  1. データを保存する古い方法であることに加えて、Cookie には4096バイト (実際には 4095) の制限があります。これは Cookie ごとです。ローカル ストレージは、ドメインあたり 5MBの大きさです— SO Questionもそれについて言及しています。

  2. localStorageStorageインターフェイスの実装です。有効期限なしでデータを保存し、Cookie の有効期限とは異なり、JavaScript を介してのみ、またはブラウザーのキャッシュ/ローカルに保存されたデータをクリアすることによってのみクリアされます。

于 2010-07-10T20:54:34.497 に答える
125

を使用localStorageすると、Web アプリケーションはデータをユーザーのブラウザ内にローカルに保存できます。HTML5 より前は、アプリケーション データはすべてのサーバー リクエストに含まれる Cookie に保存する必要がありました。Web サイトのパフォーマンスに影響を与えることなく、大量のデータをローカルに保存できます。はより現代的ですがlocalStorage、どちらの手法にも長所と短所があります。

クッキー

長所

  • レガシー サポート (これはずっと存在しています)
  • 永続データ
  • 有効期限
  • Cookie を HTTPOnly としてマークすることができます。これにより、セッション中のユーザー ブラウザーへの XSS 攻撃が制限される可能性があります (XSS 攻撃に対する完全な耐性を保証するものではありません)。

短所

  • 各ドメインはすべての Cookie を 1 つの文字列に格納するため、データの解析が困難になる可能性があります
  • データが暗号化されていないため、これが問題になります... ... サイズは小さいですが、HTTP リクエストごとに Cookie が送信されます 限られたサイズ (4KB)

ローカルストレージ

長所

  • 最新のブラウザによるサポート
  • ブラウザに直接保存される永続データ
  • 同一オリジン ルールがローカル ストレージ データに適用される
  • すべての HTTP 要求で送信されるわけではありません
  • ドメインごとに最大 5 MB のストレージ (つまり 5120 KB)

短所

  • 以前はサポートされていません: IE 8、Firefox 3.5、Safari 4、Chrome 4、Opera 10.5、iOS 2.0、Android 2.0
  • サーバーがクライアント情報を保存する必要がある場合は、意図的に送信する必要があります。

localStorage使用方法はセッションのものとほぼ同じです。彼らはかなり正確な方法を持っているので、セッションからセッションへの切り替えlocalStorageは本当に子供の遊びです。ただし、保存されたデータがアプリケーションにとって非常に重要である場合は、Cookie がlocalStorage利用できない場合に備えて、おそらくバックアップとして使用します。のブラウザ サポートを確認したい場合はlocalStorage、次の簡単なスクリプトを実行するだけです。

/* 
* function body that test if storage is available
* returns true if localStorage is available and false if it's not
*/
function lsTest(){
    var test = 'test';
    try {
        localStorage.setItem(test, test);
        localStorage.removeItem(test);
        return true;
    } catch(e) {
        return false;
    }
}

/* 
* execute Test and run our custom script 
*/
if(lsTest()) {
    // window.sessionStorage.setItem(name, 1); // session and storage methods are very similar
    window.localStorage.setItem(name, 1);
    console.log('localStorage where used'); // log
} else {
    document.cookie="name=1; expires=Mon, 28 Mar 2016 12:00:00 UTC";
    console.log('Cookie where used'); // log
}

「セキュア（SSL）ページのlocalStorage値は分離されています」 誰かが気づいたように、「http」から「https」セキュアプロトコルに切り替えるとlocalStorageが利用できなくなることに注意してください.Cookieには引き続きアクセスできます. これは、安全なプロトコルを使用する場合に注意することが重要です。

于 2016-04-01T02:50:30.880 に答える
12

ローカル ストレージの速度は、クライアントが使用しているブラウザとオペレーティング システムに大きく依存します。Mac の Chrome または Safari は、特に新しい API を使用すると、PC の Firefox よりもはるかに高速になる可能性があります。いつものように、テストはあなたの味方です (ベンチマークは見つかりませんでした)。

Cookie とローカル ストレージに大きな違いはありません。また、互換性の問題についても心配する必要があります。すべてのブラウザーが新しい HTML5 API のサポートを開始しているわけではないため、速度と互換性を確保するには Cookie が最適です。

于 2010-07-10T20:13:18.637 に答える
12

ローカル ストレージは最大 5 MB のオフライン データを保存できますが、セッションも最大 5 MB のデータを保存できます。ただし、Cookie はテキスト形式で 4kb のデータしか保存できません。

LOCAL および Session ストレージ データは JSON 形式であるため、解析が容易です。ただし、Cookie データは文字列形式です。

于 2016-08-05T09:04:03.863 に答える