javascript - 如何使用HTML 5's localstorage with Jquery'的select2插件

有没有办法通过Jquery的select2插件使用HTML5的localstorage方法？现在，当我输入数据并关闭浏览器/选项卡时，所有输入的数据都消失了，这并不是最佳选择，因为如果您不记得输入的内容，它可能会造成困惑

我的select2代码如下所示:

$(".select").select2({
minimumInputLength: 1,
multiple: true,
query: function(query){

    $.getJSON( 'url path to remote API', {
      name:query.term,
      featured:true
     }, function(results){

        var data = {results: []};
        $.each(results.data, function(index, item){
            data.results.push({id: item.artist_id, text: item.name});
        });
        query.callback(data);

     } );
}
});

任何帮助都非常感谢

最佳答案

试试看:http://jsfiddle.net/7267rkxy/12/

我为您注释了代码，以对发生的事情进行一些解释，您应该可以将data选项换成query选项，它仍然可以正常工作

PS:我注意到您的回答问题均未标记为“接受”，如果有人给您您喜欢或对您有用的答案，则应通过单击答案旁边的复选框将其回答标记为“已接受”

的HTML

<!-- setting a hard width for example -->
<input type="text" class="select" style="width:200px;" value="" />

JS

// set value property to local storage value
$(".select").val(localStorage.s2options);

$(".select").select2({
minimumInputLength: 1,
multiple: true,
data: [{id: 1, text: 'option1'},{id: 2, text: 'option2'},{id: 3, text: 'option3'}], //sample data
initSelection: function (element, callback) {
    // initSelection only fires when there is something in the value property
    callback($.parseJSON(element.val()));
}
}).on('change', function(info){
   // checking if we have anything stored in local storage
   var s2options = localStorage.s2options ? JSON.parse(localStorage.s2options) : [];

   // add / remove options
   if (info.added) {
       s2options.push(info.added);
   } else if (info.removed) {
       s2options = s2options.filter(function(opt) {
           return opt.id != info.removed.id;
       });
   }

    // save selections to local storage
    localStorage.s2options = JSON.stringify(s2options);
});