1

私は現在、簡単なToDoリストを作成しています。誰かがCookieを手伝ってくれるとありがたいです:)

Cookieを設定および取得するための2つの関数があります。

function setCookie(key, value) {
   var expires = new Date();
   expires.setTime(expires.getTime() + 31536000000); 
   document.cookie = key + '=' + value + ';expires=' + expires.toUTCString();
}

function getCookie(key) {
   var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
   return keyValue ? keyValue[2] : null;
}

タスクをtodoリスト（クラス.todo_list）に追加するためのボタン（id #add_todo）があります。テキスト入力$（'＃todo_description'）。val（）の値をCookieに設定しました。

$(document).ready( function() {  
$('#add_todo').click( function() {

    setCookie('test', $('#todo_description').val()); 
    var todoDescription = $('#todo_description').val();

    $('.todo_list').prepend(
        div class="todo"
            +checkbox              //I avoided html brackets here
            + getCookie('test')
            +delete_button
            /div
        );
});

すべて正常に動作しますが、Webページをリロードすると、前に追加したタスクが表示されず、間違っていることがわかります。todoDescription、チェックボックス、削除ボタン、およびスタイリングを含むdiv全体（class = "todo"）を保存したいと思います。タスクを配列に格納しようとしましたが、要素を1つずつ取得できませんでした。よろしくお願いします。

4

2 に答える 2

1

マークアップのチャンク全体をCookieに保存しようとするのはおそらく良い考えではありません。小さなデータスニペットを保存するには、Cookieの方が適しています。

タスクを配列に格納しようとしましたが、その要素を1つずつ取得できませんでした

配列を反復処理することを妨げているのは何ですか？

いずれにせよ、ここにはおそらく根本的な設計上の欠陥があります。それは、大量のデータをCookieに保存しようとしてはならないということです。Cookieは、数キロバイトのデータしか保持できません。より容量の大きい別のストアに実際のデータを保存することを検討してください。これはウェブサイト用ですか？バックエンドがある場合は、バックエンドのデータベースに保存する必要があります。Cookieデータは、ユーザーの認証と区別に使用されます。

于 2012-09-25T16:21:50.947 に答える
0

最も簡単な答えは、Mr. Hartl の jQuery クッキーのようなプラグインを使用することです (私はこれをよく使用します)。

<script src="jquery.cookies.js"></script>
<script>
   // of course, you no longer need these functions, but just plugging this into your example...

   function setCookie(key, val) {
      var expires = new Date().getTime() + 31536000000;
      $.cookie( key, val, { expires: expires, path: '/' } );
   }

   function getCookie(key) {
      return $.cookie(key);
   }
</script>

クッキーカッターを再発明する必要がある場合は、質問でそれを説明することをお勧めします.

于 2012-09-25T16:10:05.080 に答える