web-dev-qa-db-ja.com

Cookieの代わりにlocalStorageを使用することに欠点はありますか？

以前のWebサイトでは、Cookieを使用して、最初のアクセス時にのみホームページを表示していました。それはうまく機能しました（ たとえばここを参照 ）が、今日のcookieの使用はそれほど流行していないので、できる限り避けたいと思います。

現在、私の新しいWebサイトプロジェクトでは、javascript（モーダルボックスを表示）を介してプレホームがほとんど常に起動されているため、サーバー側でアクションを実行する必要はありません。 Cookieの代わりにHTML5 localStorageを使用することを検討しています。ブラウザにlocalStorageがない場合は、Cookieにフォールバックします。これはいい考えですか？ユーザビリティ、プライバシー保護、ウェブサイトのパフォーマンスの面でどのような影響がありますか？

LocalStorageを使用すると、Cookieを無効にしているユーザーの使いやすさが向上します。しかし、一部のHTML5機能は、一部のブラウザでのみオプトイン（ジオローカリゼーションなど）されていることを知っています。ブラウザのlocalStorageにそのような制限はありますか？ localStorageが利用可能であるがサイトで非アクティブ化されている場合、JSエラーが発生する場合はありますか？

javascripthtmlhtml5cookieslocal-storage
46
Fabien Quatravaux

使いやすさ

LocalStorageまたはcookieのどちらを使用しているかは、ユーザーにはわかりません。ユーザーがCookieを無効にすると、localStorageも機能しなくなります。

性能

2つの方法の間に顕著な速度の違いはありません。

sessionStorage

sessionStorageは、そのブラウザタブのセッション専用です。タブを閉じると、セッションは失われ、データも失われます。これは、バックエンド言語のセッション変数に似ています。

ローカルストレージ

localStorageは、ブラウザーの任意のタブまたはウィンドウで使用でき、ユーザーまたはプログラムによって削除されるまで存在します。 Cookieとは異なり、有効期限を設定することはできません。 localStorageのストレージ制限もはるかに大きくなります。

あなたの質問

  1. このデータサーバー側を使用していないため、Cookieは必要ありません。 Cookieとは異なり、localStorageがサーバーに送信されることはありません。
  2. ユーザーがCookieを無効にすると、localStorageも機能しなくなります。

フォールバックの例

Modernizrを使用して、localStorageが使用可能かどうかを確認できます。使用できない場合は、代わりにcookieを保存します。

if (Modernizr.localstorage) {
    // supports HTML5 Storage :D
} else {
    // does not support HTML5 Storage :(
}

Modernizrを差し控えて、チェックtypeof Storage !== 'undefined'。

75
Vinícius Moraes

LSとCookieの比較では、リンゴとオレンジを比較しています。

CookieとLSは、目的がまったく異なるものです。 LSは、サーバーに送信せずにclient（javascriptコード）がデータをローカルに保存できるようにするツールです。 Cookiesは、クライアントサーバー通信のツールです。 Cookieの要点は、リクエストごとに送信されることです。

以前は、JavaScriptアプリケーションがクライアントのハードドライブに何かを書き込むことが唯一の可能性であったため、Cookieがローカルストレージをエミュレートするために悪用されることが多かった。ただし、一般的にLSはCookieの代替ではないため、クライアントとサーバーの両方が読み取りおよび書き込みを行う必要がある場合は、LSではなくCookieを使用してください。

30
georg

追加する1つのポイントは、通常はクロスプロトコルで共有されるCookieとは異なり、ストレージは同一生成元ポリシーに準拠します。結果として、サイトは同じドメインを共有しますが、異なるプロトコルでホストされている場合、保存されたデータは共有されません。

Webサイトがhttpとhttpsで機能する必要がある場合に言います。たとえば、ユーザーが「購入リンク」をクリックすると、httpsで保護されたチェックアウトに移動します。同じドメインを共有している場合でも、チェックアウトは以前にhttpサイトに保存されたデータを取得できません。

7
Norman Xu

サーバーがlocalStorageを読み取るのは簡単ではないようです 。ただし、データはすべてクライアント側であることがわかっているため、盗聴から安全になります。

Cookieは上書きできず、追加と読み取りのみが可能です。

alert(document.cookie);
document.cookie = "nope";
alert(document.cookie);
0
Isaac