JavaScript を学習して Cookie を読み書きする例-jsチュートリアル-php.cn

JavaScript を学習して Cookie を読み書きする例

PHPz

リリース： 2018-09-29 15:15:15

オリジナル

1204 人が閲覧しました

この記事では、JavaScript の Cookie の読み書きに関する関連知識を例を通して紹介します。必要な方は参考にしてください。

まず、Cookie について簡単に理解しましょう。

Web ページを作成する過程では、あるページから別のページに情報を転送する必要があることがよくあります。 JavaScript の Cookie メカニズム。簡単に言うと、Cookie はユーザーのコンピュータに少量のデータを保存し、それをリモートで取得する便利な方法を提供し、Web サイトがユーザーの習慣設定や Web サイトへの最後の訪問時間などの詳細を保存できるようにします。 Cookie 自体は、ページによってユーザーのコンピュータに保存され、他のページによって読み取られる短い情報です。 Cookie は通常、一定期間後に期限切れになるように設定されています。

もちろん、Cookie にも制限があります。ブラウザには保存できる Cookie の数に制限があり、通常は数百以上です。通常の状況では、ドメイン名ごとに 20 個の Cookie が許可され、各ドメインでは最大 4 KB の Cookie を保存できます。サイズ制限によって引き起こされる問題に加えて、ハードディスク上の Cookie の原因となる可能性のあるさまざまな理由も考えられます。有効期限が切れたり、ユーザーが Cookie 情報を消去したり、別のブラウザに切り替えたりした場合。したがって、Cookie は重要なデータの保存には適していません。コードを記述するときは、Cookie 取得例外の処理方法も考慮する必要があります。

JavaScript では、document オブジェクトの cookie 属性を使用して cookie を保存および取得します。通常、document.cookie 内の情報は名前と値のペアで構成される文字列であり、各データのペアはform :

name=value;

ログイン後にコピー

以下では、JavaScript で Cookie を読み書きする方法を示す簡単な例を使用します。

最初は createCookie.html で、ページが Cookie として作成されます。完全なコードは次のとおりです:

<html>
<head>
  <title>createCookie</title>
  <script>
    function createCookie(){
      //get name and password
      var name = document.getElementById("name").value;
      var pwd = document.getElementById("pwd").value;
      //create cookie
      document.cookie = name+&#39;|&#39;+pwd;
      //go to showCookie.html page
      window.location.href = "showCookie.html";
    }
  </script>
</head>
<body>
  Userame:  <input id="name" type="text" /><br><br>
  Password:  <input id="pwd" type="password" /><br><br>
  <button onclick="createCookie()">Submit</submit>
</body>
</html>

ログイン後にコピー

ページのスクリーンショットは次のとおりです:

送信ボタンをクリックすると、Cookie が送信されます。ユーザー名とパスワードの情報が保存され、showCookie.html ページにジャンプします。このうち、showCookie.html ページの完全なコードは次のとおりです。

<html>
<head>
  <title>showCookie</title>
  <script>
    function showCookie(){
      //document.cookie is a string, using split() function to get cookie date in array form 
      var arr = document.cookie.split(&#39;|&#39;);
      //processing data in cookie
      var cookie_info = &#39;Data in cookie:<br>username is:  &#39;+arr[0]+"<br>password is:  "+arr[1]+&#39;<br>&#39;;
      //set content of element of id "res"
      document.getElementById("res").innerHTML = cookie_info;
    }
  </script>
</head>
<body>
  <button onclick="showCookie()">Show Cookie</button>
  <p id="res"></p>
</body>
</html>

ログイン後にコピー

ページのスクリーンショットは次のとおりです。

JavaScript を学習して Cookie を読み書きする例

Clicking [Cookie を表示] ボタンをクリックすると、Cookie 内の情報が表示されます。

次に、このプログラムをローカルとサーバーで実行し、このプログラムを IE ブラウザと Chrome ブラウザでそれぞれ実行して、Cookie の動作を確認します。

まず、このプログラムをローカルで実行し、上記の 2 つのファイルを E ドライブに置きます。まず IE ブラウザで実行し、createCookie.html ページに情報を入力し、送信ボタンをクリックします。スクリーンショットは次のとおりです。

JavaScript を学習して Cookie を読み書きする例

showCookie にジャンプした後。 .html ページで、[Cookie を表示] ボタンをクリックします。ページのスクリーンショットは次のとおりです:

JavaScript を学習して Cookie を読み書きする例

Cookie は、ローカル環境の IE ブラウザーで通常どおり実行されます。

次に、Chrome ブラウザでどのように機能するかを見てみましょう。まず、Chrome ブラウザで createCookie.html ページを開き、情報を入力して、送信ボタンをクリックします。スクリーンショットは次のとおりです。

JavaScript を学習して Cookie を読み書きする例

showCookie.html ページにジャンプした後、show Cookie ボタンをクリックします。ページのスクリーンショットは次のとおりです。

JavaScript を学習して Cookie を読み書きする例

同じこの手順では、今回は Cookie が Chrome にあるため、ブラウザでの実行に失敗しました。

次に、このプログラムをサーバーで実行します。xampp を使用し、Apache サーバーを開き、上記 2 つの HTML ファイルを xampp インストールフォルダーの下の htdocs フォルダーに配置する必要があります (具体的な操作方法は次のとおりです)。このブログを参照してください: JavaScript での AJAX の使用 (初心者向け))。 IE ブラウザでプログラムを実行します。IE ブラウザに URL を入力します: http://localhost/createCookie...:

JavaScript を学習して Cookie を読み書きする例