web-dev-qa-db-ja.com

jquery cookieに配列を保存する方法は？

JQuery cookieに配列を保存する必要がありますが、誰か助けてください。

jqueryarrayscookies
21
mukamaivan

必要なものがまだ正確にはわかりませんが、これが役立つことを願っています。これは、任意のページのアイテムにアクセスできるようにするサンプルであり、単なるサンプルです！ cookieNameを使用して、ページ全体で識別します。

//This is not production quality, its just demo code.
var cookieList = function(cookieName) {
//When the cookie is saved the items will be a comma seperated string
//So we will split the cookie by comma to get the original array
var cookie = $.cookie(cookieName);
//Load the items or a new array if null.
var items = cookie ? cookie.split(/,/) : new Array();

//Return a object that we can use to access the array.
//while hiding direct access to the declared items array
//this is called closures see http://www.jibbering.com/faq/faq_notes/closures.html
return {
    "add": function(val) {
        //Add to the items.
        items.Push(val);
        //Save the items to a cookie.
        //EDIT: Modified from linked answer by Nick see 
        //      http://stackoverflow.com/questions/3387251/how-to-store-array-in-jquery-cookie
        $.cookie(cookieName, items.join(','));
    },
    "remove": function (val) { 
        //EDIT: Thx to Assef and luke for remove.
        indx = items.indexOf(val); 
        if(indx!=-1) items.splice(indx, 1); 
        $.cookie(cookieName, items.join(','));        },
    "clear": function() {
        items = null;
        //clear the cookie.
        $.cookie(cookieName, null);
    },
    "items": function() {
        //Get all the items.
        return items;
    }
  }
}

そのため、どのページでもこのようなアイテムを取得できます。

var list = new cookieList("MyItems"); // all items in the array.

CookieListにアイテムを追加する

list.add("foo"); 
//Note this value cannot have a comma "," as this will spilt into
//two seperate values when you declare the cookieList.

すべてのアイテムを配列として取得する

alert(list.items());

アイテムをクリアする

list.clear();

プッシュやポップのようなものを簡単に追加できます。再びこれが役立つことを願っています。

[〜＃〜] edit [〜＃〜] IEに問題がある場合は、bravosの回答をご覧ください

57
almog.ori

JQuery cookieプラグインをここからダウンロードします。 http://plugins.jquery.com/project/Cookie

JQueryでCookieを設定するのはこれと同じくらい簡単です。ここでは、「example」という名前のCookieを["foo1"、 "foo2"]の値で作成しています。

$.cookie("example", ["foo1", "foo2"]);

JQueryを使用すると、Cookieの値を取得することも非常に簡単です。以下は、ダイアログウィンドウに「example」Cookieの値を表示します。

alert( $.cookie("example") );
11
almog.ori

IE 8でalmog.oriのスクリプトを使用しようとするとエラーが発生しました

    //This is not production quality, its just demo code.
    var cookieList = function(cookieName) {
    //When the cookie is saved the items will be a comma seperated string
    //So we will split the cookie by comma to get the original array
    var cookie = $.cookie(cookieName);
    //Load the items or a new array if null.
    var items = cookie ? cookie.split(/,/) : new Array();

    //Return a object that we can use to access the array.
    //while hiding direct access to the declared items array
    //this is called closures see http://www.jibbering.com/faq/faq_notes/closures.html
    return {
        "add": function(val) {
            //Add to the items.
            items.Push(val);
            //Save the items to a cookie.
            //EDIT: Modified from linked answer by Nick see 
            //      https://stackoverflow.com/questions/3387251/how-to-store-array-in-jquery-cookie
            $.cookie(cookieName, items.join(','));
        },
        "remove": function (val) { 
            //EDIT: Thx to Assef and luke for remove.
            indx = items.indexOf(val); 
            if(indx!=-1) items.splice(indx, 1); 
            $.cookie(cookieName, items.join(','));        },
        "clear": function() {
            items = null;
            //clear the cookie.
            $.cookie(cookieName, null);
        },
        "items": function() {
            //Get all the items.
            return items;
        }
      }

}

数時間エラーを掘り出した後、indexOf

"remove": function (val) { 
                //EDIT: Thx to Assef and luke for remove.
                indx = items.indexOf(val); 
                if(indx!=-1) items.splice(indx, 1); 
                $.cookie(cookieName, items.join(','));        },

IE 8。

そして、私はここから別のコードベースを追加します Internet ExplorerブラウザのJavaScriptでArray indexOf（）を修正する方法

できます、

"remove": function (val) {
    //EDIT: Thx to Assef and luke for remove.
    /** indexOf not support in IE, and I add the below code **/
    if (!Array.prototype.indexOf) {
        Array.prototype.indexOf = function(obj, start) {
            for (var i = (start || 0), j = this.length; i < j; i++) {
                if (this[i] === obj) { return i; }
            }
            return -1;
        }
    }
    var indx = items.indexOf(val);
    if(indx!=-1) items.splice(indx, 1);
    //if(indx!=-1) alert('lol');
    $.cookie(cookieName, items.join(','));
},

誰かがIE 8でスクリプトが機能していないことを発見した場合に備えて、これが役立つかもしれません。

3
bravo net

これが誰かに役立つかどうかはわかりませんが、アイテムがすでにそこにあるかどうかをチェックする機能も必要だったので、再度追加しません。

同じremove関数を使用し、関数を含むように変更しました：

"contain": function (val) {
//Check if an item is there.
if (!Array.prototype.indexOf) {
    Array.prototype.indexOf = function(obj, start) {
        for (var i = (start || 0), j = this.length; i < j; i++) {
            if (this[i] === obj) { return i; }
        }
        return -1;
    };
}
var indx = items.indexOf(val);
if(indx>-1){
    return true;
}else{
    return false;
}
},

何らかの理由で、上記のコードが常に機能するとは限りません。動作する新しいものは次のとおりです。

"contain": function (val) {
//Check if an item is there.
if (!Array.prototype.indexOf) {
    Array.prototype.indexOf = function(obj, start) {
        for (var i = (start || 0), j = this.length; i < j; i++) {
            if (this[i] === obj) { return i; }
        }
        return -1;
    };
}
var indx = items.join(',').indexOf(val);
if(indx > -1){
    return true;
}else{
    return false;
}
},
3
alhoseany

私の実装をチェックしてください（jqueryプラグインとして）：

(function ($) {
    $.fn.extend({
        cookieList: function (cookieName) {
            var cookie = $.cookie(cookieName);

            var items = cookie ? eval("([" + cookie + "])") : [];

            return {
                add: function (val) {
                    var index = items.indexOf(val);

                    // Note: Add only unique values.
                    if (index == -1) {
                        items.Push(val);
                        $.cookie(cookieName, items.join(','), { expires: 365, path: '/' });
                    }
                },
                remove: function (val) {
                    var index = items.indexOf(val);

                    if (index != -1) {
                        items.splice(index, 1);
                        $.cookie(cookieName, items.join(','), { expires: 365, path: '/' });
                     }
                },
                indexOf: function (val) {
                    return items.indexOf(val);
                },
                clear: function () {
                    items = null;
                    $.cookie(cookieName, null, { expires: 365, path: '/' });
                },
                items: function () {
                    return items;
                },
                length: function () {
                    return items.length;
                },
                join: function (separator) {
                    return items.join(separator);
                }
            };
        }
    });
})(jQuery);

使用法：

  var cookieList = $.fn.cookieList("cookieName");
  cookieList.add(1);
  cookieList.add(2);
  cookieList.remove(1);
  var index = cookieList.indexOf(2);
  var length = cookieList.length();
3
Pavel Shkleinik

私が今やっていることの素晴らしいコードですが、バグが見つかりました。整数（ID）のリストをCookieに保存していました。ただし、Cookieが最初に読み取られるとき、文字列に型キャストされます。以前に（int）1を保存し、後でページのリロードでCookieが取得されると、「1」として指定されます。したがって、リストから（int）1を削除しようとすると、一致のインデックスは作成されません。

私が適用した修正は、アイテムを追加またはインデックス付けする前に、「val」式をval.toString（）に変更することです。したがって、itemsは文字列の配列です。

"add": function(val) {
    //Add to the items.
    items.Push(val.toString());
    //Save the items to a cookie.
    $.cookie(cookieName, items.join(','));
},

"remove": function (val) { 
    //EDIT: Thx to Assef and luke for remove.
    if (!Array.prototype.indexOf) {
        Array.prototype.indexOf = function(obj, start) {
            for (var i = (start || 0), j = this.length; i < j; i++) {
                if (this[i] === obj) { return i; }
            }
            return -1;
        };
    }

    var indx = items.indexOf(val.toString()); 
    if(indx!=-1) items.splice(indx, 1); 
    //Save the items to a cookie.
    $.cookie(cookieName, items.join(','));
},
2
user3369864

JSONエンコードとsecureJSONデコードを使用するようにサンプルを少し調整し、より堅牢で保存しました。

https://code.google.com/p/jquery-json/ に依存します

/*
 * Combined with:
 * http://www.terminally-incoherent.com/blog/2008/11/25/serializing-javascript-objects-into-cookies/
 * With:
 * https://code.google.com/p/jquery-json/
 *
 */
(function ($) {
    $.fn.extend({
        cookieList: function (cookieName, expireTime) {

            var cookie = $.cookie(cookieName);              
            var items = cookie ? $.secureEvalJSON(cookie) : [];

            return {
                add: function (val) {
                    var index = items.indexOf(val);
                    // Note: Add only unique values.
                    if (index == -1) {
                        items.Push(val);
                        $.cookie(cookieName, $.toJSON(items), { expires: expireTime, path: '/' });
                    }
                },
                remove: function (val) {
                    var index = items.indexOf(val);

                    if (index != -1) {
                        items.splice(index, 1);
                        $.cookie(cookieName, $.toJSON(items), { expires: expireTime, path: '/' });
                    }
                },
                indexOf: function (val) {
                    return items.indexOf(val);
                },
                clear: function () {
                    items = null;
                    $.cookie(cookieName, null, { expires: expireTime, path: '/' });
                },
                items: function () {
                    return items;
                },
                length: function () {
                    return items.length;
                },
                join: function (separator) {
                    return items.join(separator);
                }
            };
        }
    });
})(jQuery);
2
Wessel dR

この実装は、ページ上の複数のコントロールに独立したアクセスを提供します。

(function ($) {
    $.fn.extend({
        cookieList: function (cookieName) {

            return {
                add: function (val) {
                    var items = this.items();

                    var index = items.indexOf(val);

                    // Note: Add only unique values.
                    if (index == -1) {
                        items.Push(val);
                        $.cookie(cookieName, items.join(','), { expires: 365, path: '/' });
                    }
                },
                remove: function (val) {
                    var items = this.items();

                    var index = items.indexOf(val);

                    if (index != -1) {
                        items.splice(index, 1);
                        $.cookie(cookieName, items.join(','), { expires: 365, path: '/' });
                    }
                },
                indexOf: function (val) {
                    return this.items().indexOf(val);
                },
                clear: function () {
                    $.cookie(cookieName, null, { expires: 365, path: '/' });
                },
                items: function () {
                    var cookie = $.cookie(cookieName);

                    return cookie ? eval("([" + cookie + "])") : []; ;
                },
                length: function () {
                    return this.items().length;
                },
                join: function (separator) {
                    return this.items().join(separator);
                }
            };
        }
    });
})(jQuery);
2
Pavel Shkleinik

これは、jsonとjqueryを使用してCookieに配列を格納および取得する方法です。

//Array    
var employees = [
                {"firstName" : "Matt", "lastName" : "Hendi"},
                {"firstName" : "Tim", "lastName" : "Rowel"}
];

var jsonEmployees = JSON.stringify(employees);//converting array into json string   
$.cookie("employees", jsonEmployees);//storing it in a cookie

var empString = $.cookie("employees");//retrieving data from cookie
var empArr = $.parseJSON(empString);//converting "empString" to an array.
2
Susie

"remove"アクションを使用したい人に追加しました-valは配列の変更を開始するインデックスです：

    "remove": function (val) {
        items.splice(val, 1);
        $.cookie(cookieName, items.join(','));
    }
1
Assaf Vilmovski

"remove"関数のほんの少しの代替：

    "removeItem": function (val) { 
        indx = items.indexOf(val);
        if(indx!=-1) items.splice(indx, 1);
        $.cookie(cookieName, items.join(',')); 
    }

ここで、valは配列内の項目の値です（例：

   >>> list.add("foo1");
   >>> list.add("foo2");
   >>> list.add("foo3");
   >>> list.items();

   ["foo1", "foo2", "foo3"];

   >>> list.removeItem("foo2");
   >>> list.items();

   ["foo1", "foo3"];
1
Luke

Cookieとして保存する前に配列をシリアル化し、読み取り時に非シリアル化できます。すなわちjsonで？

0
Flobo

これは[〜＃〜] json [〜＃〜] Cookieを操作するための実装で、arraysを格納するためのより良い方法です。私の端からテストしました。

$.fn.extend({
  cookieList: function (cookieName) {
      var cookie = $.cookie(cookieName);

      var storedAry = ( cookie == null ) ? [] : jQuery.parseJSON( cookie );


      return {
          add: function (val) {

              var is_Arr = $.isArray( storedAry );
              //console.log(storedAry);


              if( $.inArray(val, storedAry) === -1 ){
                storedAry.Push(val);
                //console.log('inside');
              }

              $.cookie( cookieName, JSON.stringify(storedAry), { expires : 1 ,  path : '/'});
              /*var index = storedAry.indexOf(val);
              if (index == -1) {
                  storedAry.Push(val);
                  $.cookie(cookieName, storedAry.join(','), { expires: 1, path: '/' });
              }*/
          },
          remove: function (val) {

              storedAry = $.grep(storedAry, function(value) {
                return value != val;
              });
              //console.log('Removed '+storedAry);

              $.cookie( cookieName, JSON.stringify(storedAry), { expires : 1 ,  path : '/'});
              /*var index = storedAry.indexOf(val);
              if ( index != -1 ){
                  storedAry.splice( index, 1 );
                  $.cookie(cookieName, storedAry.join(','), { expires: 1, path: '/' });
               }*/
          }
          clear: function () {
              storedAry = null;
              $.cookie(cookieName, null, { expires: 1, path: '/' });
          }
      };
  }

}）;

0
Mohan Dere