最近は自分が勝手にやっているページでユーザーの行動を保存したいと思っていたので、リフレッシュ時に紛失しないようにクッキーやHTML 5のwebストレージを見てみました.

runoob cookieチュートリアル

runoob HTML 5 webストレージ

クッキーケース

cookie#

クッキーはWebページのユーザー情報を格納するために使用されます

ユーザがウェブページにアクセスすると、彼の名前はクッキーに記録することができる.

は、ユーザが次にこのページにアクセスするときに、クッキーにおいてユーザアクセスレコードを読み取ることができる.

クッキーは名前値ペアで格納されます

  username=feng zhao

JavaScriptでdocumentを使用する.クッキー属性を作成、読み取り、削除するクッキー(一)作成

  document.cookie="username=John Doe; // cookie
                expires=Thu, 18 Dec 2013 12:00:00 GMT; //  ， 
                path=/"; // cookie ， cookie 

(二)修正は作成したコードと同様に、username=John Doeをusername=feng zhaoに変更すると修正の効果が得られ、古いクッキーが上書きされます.(三)同上を削除し、expiresパラメータを以前の時間に設定すればよい

HTML webストレージ#

HTML 5を使用すると、ユーザーのブラウズデータをローカルに格納できます.以前、ローカルストレージではクッキーが使用されていました.しかし、Webストレージにはより安全で迅速なものが必要である.これらのデータはサーバに保存することはないが、ユーザがウェブサイトのデータを要求する場合にのみ使用される.また、Webサイトのパフォーマンスに影響を与えることなく、大量のデータを格納することもできます.(ただ、触れたばかりの私は上記の言葉を理解していないので、もっと実践してから理解できるかもしれません)
localStorageオブジェクトとsessionStorageオブジェクトHTMLは、主に上記の2つのオブジェクトを使用して格納されます.

localStorage-時間制限のないデータストレージ

sessionStorage-1つのsession(Webサイトにアクセスしてブラウザを閉じるまでの時間)のデータストレージ

現在、多くのブラウザでstorageがサポートされており、クッキーと同様にキー値ペアの形式で格納されています.よく使われるAPIの中には
|文法|効果|-|localStorage.setItem(key,value); | データを保存|localStorage.getItem(key); | データを読み込み|localStorage.removeItem(key); | 個々のデータを削除|localStorage.clear(); | すべてのデータ|sessionのAPIを削除してlocalをsessionに変更します

使用法#

1.cookie##

クッキーを使用する基本的な2つの関数は、クッキー値の設定と取得の設定です.

  function setCookie(cname,cvalue,exdays)
    {
        var d = new Date();
        d.setTime(d.getTime()+(exdays*24*60*60*1000));
        var expires = "expires="+d.toGMTString(); // 
        document.cookie = cname + "=" + cvalue + "; " + expires;
    }

取得

  function getCookie(cname)
    {
        var name = cname + "=";
        var ca = document.cookie.split(';'); //  cookie  
        for(var i=0; i

2.storage##

この比較的cookieはAPI localStorageを用いることにより比較的簡単に使用できる.setItem(key,value);localStorageとgetItem(key); localstorageの設定と呼び出しを実現
Cookie,LocalStorageとSessionStorageの3つの違い
最後に、私は自分でクッキーでアカウントを覚えてパスワードを覚える機能を実現するページを書いてみましたが、暗号化を使用していません.基本的な効果は本稿の冒頭で見ることができます.そして、これを書くことでまた多くのことを学びました.(以下は記憶に関係なく)

checked属性により、true/false if(document.getElementById(「un」)の2つの値を持つラジオボックスが選択するか否かを判断することができる.checked==true)....

inputテキストボックスの値を取得するには、text()ではなくval()を使用する必要があります.奇妙なものが出てきます.

$("input[name='password']").val();

小結:3つのストレージ方式の特徴によって、彼らの応用シーンを決定することができます.1.HTTPリクエストごとにCookieの情報を持っていることを考慮すると、Cookieはもちろん簡素化できるので、比較的よく使われるアプリケーションシーンの一つは、ユーザーがログインしているかどうかを判断することである.localstorageは、比較的大きなローカルデータを格納するために使用できます.