ローカルストレージ誕生の背景

HTML4時代のCookieのサイズ、形式、保存データ形式の制限により、Webサイトアプリケーションがユーザーの情報の一部をブラウザ側に保存したい場合、Cookieのみを使用できます。ただし、Cookie のこれらの制限は、Cookie が ID などの識別子などの単純なデータしか保存できないことを意味します。

以下は Cookie の制限です:

ほとんどのブラウザは、最大サイズ 4096 バイトの Cookie をサポートします。

ブラウザは、サイトがユーザーのコンピュータに保存できる Cookie の数も制限します。ほとんどのブラウザでは、サイトごとに 20 個の Cookie しか許可されません。それ以上の Cookie を保存しようとすると、最も古い Cookie が破棄されます。

一部のブラウザでは、すべてのサイトから受け入れる Cookie の総数に絶対的な制限 (通常は 300) が設定されています。

デフォルトでは、Cookie は HTTP リクエストとともにバックエンドサーバーに送信されますが、すべてのリクエストに Cookie が必要なわけではありません。たとえば、JS、CSS、画像などのリクエストには Cookie が必要ありません。

Cookie の一連の制限を打ち破るために、HTML5 は JS の新しい API を通じて大量のデータをクライアントブラウザに直接保存できるようになり、複雑なローカルデータベースをサポートして JS をより効率的にします。 HTML5 は 2 種類の WebStorage をサポートしています:

永続的なローカルストレージ (localStorage)

セッションレベルのローカルストレージ (sessionStorage)

localStorage がサポートされているかどうかを検出します:

<!DOCTYPE html>
<html>
<head> 
    <meta charset="utf-8"> 
    <title>php中文网</title> 
</head>
<body>
<div id="result"></div>
<script>
    if(window.localStorage){     alert("浏览支持localStorage") }else{    alert("浏览暂不支持localStorage") } //或者 if(typeof window.localStorage == 'undefined'){ alert("浏览暂不支持localStorage") }
</script>
</body>
</html>

学び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网</title> </head> <body> <div id="result"></div> <script> if(window.localStorage){ alert("浏览支持localStorage") }else{ alert("浏览暂不支持localStorage") } //或者 if(typeof window.localStorage == 'undefined'){ alert("浏览暂不支持localStorage") } </script> </body> </html>

提出するリセットコード

自動運転