Javascript ローカル ストレージの概要

1. さまざまなストレージ ソリューションの簡単な比較

Cookie: すべてのブラウザーでサポートされ、容量は 4KB です

UserData: IE のみでサポートされ、容量は 64KB です

Flash: 100KB、非 HTML ネイティブ、プラグインのサポートが必要です

Google Gears SQLite: プラグインのサポートが必要、容量は無制限

LocalStorage: HTML5、容量は 5M

SesstionStorage: HTML5、容量は 5M

globalStorage: Firefox に固有、Firefox13 ではこのメソッドはサポートされなくなりました

UserData はIE、Google Gears、SQLite でサポートされており、Flash は HTML5 の出現とともに徐々に歴史の舞台から退いており、今日の主役は Cookie、LocalStorge、SessionStorge

2 の 3 つだけです。

Cookie を扱うフロントエンドとして Cookie は比較的古いテクノロジーで、1993 年に、ユーザーがアクセスする際のアクセス速度をさらに向上させるために、現在広く使用されている Cookie を発明しました。ウェブサイトと同時にパーソナライズされたネットワークを実現するために Cookie が使用されます。

2.1 Cookie の特徴

まず Cookie の特徴を見てみましょう:

1) Cookie のサイズは 4KB に制限されており、大きなファイルや電子メールなどの大きなデータを受け入れることができません。

2) Cookie を含むリクエストがある限り、Cookie はサーバーとブラウザの間で送受信されます (これが、ローカル ファイルが Cookie をテストできない理由の説明になります)。さらに、Cookie データは常に同じオリジンからの http リクエストに含まれます (必要でない場合でも)。これは、Cookie が大きくなりすぎない重要な理由でもあります。オーソドックスな Cookie の配布は、HTTP プロトコルを拡張することによって実現され、サーバーは HTTP 応答ヘッダーに特別な命令行を追加し、その命令に従って対応する Cookie を生成するようブラウザに指示します。

3) ユーザーがサーバーデータをリクエストするたびに、そのリクエストとともに Cookie がサーバーに送信されます。PHP などのサーバースクリプト言語は、Cookie によって送信されたデータを処理でき、非常に便利であると言えます。もちろんフロントエンドでもCookieを生成することはできますが、Cookieをjsで操作するのはブラウザがdocument.cookieなどのオブジェクトを提供するだけですし、Cookieの割り当てや取得も面倒です。 PHP では、setcookie() を通じて Cookie を設定し、スーパーグローバル配列 $_COOKIE を通じて Cookie を取得できます。

Cookie の内容には主に、名前、値、有効期限、パス、ドメインが含まれます。パスとドメインを合わせて Cookie のスコープを形成します。有効期限が設定されていない場合、この Cookie の有効期間はブラウザ セッション中にあり、ブラウザ ウィンドウを閉じると Cookie は消えます。ブラウザーのセッション中に保持されるこのタイプの Cookie は、セッション Cookie と呼ばれます。セッション Cookie は通常、ハードディスクではなくメモリに保存されます。もちろん、この動作は仕様では指定されていません。有効期限が設定されている場合、ブラウザは Cookie をハードディスクに保存します。ブラウザを閉じて再度開いた場合でも、設定された有効期限が経過するまでこれらの Cookie は有効です。ハード ドライブに保存された Cookie は、2 つの IE ウィンドウなど、異なるブラウザ プロセス間で共有できます。ブラウザが異なれば、メモリに保存された Cookie の処理方法も異なります。

2.2 セッション

Cookie に関して言えば、セッションについて話さずにはいられません。

セッションメカニズム。セッション メカニズムはサーバー側のメカニズムであり、サーバーは情報を保存するためにハッシュ テーブルに似た構造を使用します (またはハッシュ テーブルを使用する場合もあります)。プログラムがクライアントのリクエストに対してセッションを作成する必要がある場合、サーバーはまずクライアントのリクエストにセッション識別子 (セッション ID と呼ばれます) が含まれているかどうかを確認します。含まれている場合は、このクライアントに対してセッションが以前に作成されていることを意味します。サーバーはセッション ID に従ってセッションを取得し、それを使用します (取得できない場合は、新しいセッションが作成されます)。クライアントのリクエストにセッション ID が含まれていない場合は、クライアント用にセッションが作成されます。このセッションに関連付けられたセッション ID が生成されます。セッション ID の値は、繰り返されず、模倣するパターンが簡単に見つからない文字列である必要があります。このセッション ID は、保存のためにこの応答でクライアントに返されます。このセッション ID を保存する方法には Cookie を使用できるため、対話プロセス中にブラウザーはルールに従ってこの ID をサーバーに自動的に送信できます。通常、この Cookie の名前は SEEESIONID に似ています。ただし、Cookie は人為的に無効にすることができるため、Cookie が無効になっている場合でもセッション ID をサーバーに戻す他のメカニズムが必要です。頻繁に使用される手法は URL 書き換えと呼ばれ、URL パスの末尾にセッション ID を直接追加します。例: http://damonare.cn?sessionid=123456 フォーム隠しフィールドと呼ばれるテクノロジーもあります。つまり、サーバーは自動的にフォームを変更し、非表示フィールドを追加して、フォームの送信時にセッション ID をサーバーに返すことができるようにします。例:

実際、この手法は、アクションに URL 書き換えを適用することで簡単に置き換えることができます。

2.3 Cookieとセッションの簡単な比較

Cookieとセッションの違い:

1) Cookieデータは顧客のブラウザに保存され、セッションデータはサーバーに配置されます。

2) Cookie はあまり安全ではありません。ローカルに保存された Cookie を分析して、セキュリティ上の理由からセッションを使用する必要があります。

3) セッションはサーバーに一定期間保存されます。アクセスが増加すると、サーバーのパフォーマンスがさらに消費され、サーバーのパフォーマンスを低下させるために Cookie を使用する必要があります。

4) 1 つの Cookie によって保存されるデータは 4K を超えることはできず、多くのブラウザーではサイトで保存できる Cookie は 20 個までに制限されています。

5) したがって、次のことが推奨されます:

ログイン情報などの重要な情報をSESSIONとして保存する

他の情報を保持する必要がある場合は、Cookieに配置できます

2.4 document.cookie属性

expires属性

を指定しますデフォルトでは、Cookie はブラウザーのセッション中にのみ存在します。これらの値は、Cookie を一定期間存続させると失われます。時刻の場合は、expires 属性を将来の有効期限日に設定します。これは、Cookie の有効期間を秒単位で設定する max-age 属性に置き換えられました。

path属性

Cookieに関連付けられたWebページを指定します。デフォルトでは、Cookie は、それを作成した Web ページ、Web ページと同じディレクトリ内の Web ページ、およびこの Web ページが配置されているディレクトリのサブディレクトリ内の Web ページに関連付けられます。

domain 属性

domain 属性を使用すると、複数の Web サーバーが Cookie を共有できます。ドメイン属性のデフォルト値は、Cookie を作成した Web ページが存在するサーバーのホスト名です。 Cookie のドメインを、サーバーが配置されているドメイン以外のドメインに設定することはできません。たとえば、order.damonare.cn にあるサーバーが、catalog.damonare.cn によって設定された Cookie 値を読み取れるようにします。 catalog.damonare.cn ページによって作成された Cookie がそのパス属性を「/」に設定し、ドメイン属性を「.damonare.cn」に設定した場合、すべての Web ページはcatalog.damonare.cn に配置され、すべてのページは orlders に配置されます。 damonare .cn Web ページ、および damonare.cn ドメインにある他のサーバー上の Web ページは、この Cookie にアクセスできます。

secure 属性

ネットワーク上で Cookie を送信する方法を指定するブール値です。デフォルトでは安全ではなく、通常の http 接続を通じて送信されます

2.5 Cookie の実践

ここでは、JavaScript を使用して Cookie を書き込みます。 w3cschool のデモをお借りしました:

function getCookie(c_name){
    if (document.cookie.length>0){
        c_start=document.cookie.indexOf(c_name + "=")
        if (c_start!=-1){
            c_start=c_start + c_name.length+1
            c_end=document.cookie.indexOf(";",c_start)
            if (c_end==-1) c_end=document.cookie.length
            return unescape(document.cookie.substring(c_start,c_end))
        }
    }
    return "";
}

function setCookie(c_name,value,expiredays){
    var exdate=new Date()
    exdate.setDate(exdate.getDate()+expiredays)
    document.cookie=c_name+ "=" +escape(value)+
            ((expiredays==null) ? "" : "; expires="+exdate.toUTCString())
}
function checkCookie(){
    username=getCookie('username')
    if(username!=null && username!=""){alert('Welcome again '+username+'!')}
    else{
        username=prompt('Please enter your name:',"")
        if (username!=null && username!=""){
            setCookie('username',username,355)
        }
    }
}

ここで Cookie の有効期間が 355 日と定義されていることに注意してください

3. localStorage

これは永続的なストレージ方法であり、手動でクリアしないとデータが消去されます。永遠に期限切れになりません。

また、Key-Value メソッドを使用してデータを保存します。基礎となるデータ インターフェイスは sqlite であり、データはドメイン名に従って対応するデータベース ファイルに保存されます。より大きなデータ (IE8 では 10MB、Chrome では 5MB) を保存でき、帯域幅の無駄を避けるために保存されたデータはサーバーに送信されません。

3.1 localStorageの属性メソッド

次の表は、localStorageの属性とメソッドの一部です

3.2 localStorageの欠点

① localStorageのサイズは約500万文字に制限されており、ブラウザごとにばらつきがあります

② localStorage はプライバシーモードになっており、読み取れません

③ localStorage の本質は、ファイルの読み書きです。大量のデータがある場合、スタックします (Firefox はデータを一度にメモリにインポートします)。考えると怖いです)

④ localStorage はクローラーによってクロールされませんので、使用しないでください。URL パラメーターの受け渡しを完全に置き換えます

4. sessionStorage

は、サーバー側で使用されるセッションに似ています。 -レベルのキャッシュ。ブラウザを閉じるとデータは消去されます。ただし特別なのは、その有効範囲がウィンドウ レベルであることです。つまり、sessionStorage データは異なるウィンドウ間で共有できません。利用方法(localStorageと全く同じ):

5. sessionStorage和localStorage的区别

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。当用户关闭浏览器窗口后，数据立马会被删除。

localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。第二天、第二周或下一年之后，数据依然可用。

5.1 测试

sessionStorage:

if (sessionStorage.pagecount){
    sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
}else{
      sessionStorage.pagecount=1;
}
console.log("Visits "+ sessionStorage.pagecount + " time(s).");

测试过程：我们在控制台输入上述代码查看打印结果

控制台首次输入代码：

关闭窗口，控制台再次输入代码：

所谓的关闭窗口即销毁，就是这样，关闭窗口重新打开输入代码输出结果还是上面图片的样子，也就是说关闭窗口后sessionStorage.pagecount即被销毁，除非重心创建。或者从历史记录进入才会相关数据才会存在。好的，我们再来看下localStorge表现：

if (localStorage.pagecount){
    localStorage.pagecount=Number(localStorage.pagecount) +1;
}else{
    localStorage.pagecount=1;
 }
console.log("Visits "+ localStorage.pagecount + " time(s).");

控制台首次输入代码：

关闭窗口，控制台再次输入代码：

6. web Storage和cookie的区别

Web Storage(localStorage和sessionStorage)的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。

除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。

但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生