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

Question

有没有办法将 HTML5 的本地存储方法与 Jquery 的 select2 插件一起使用？现在，当我输入数据并关闭浏览器/选项卡时，所有输入的数据都消失了，这不是最佳选择，因为如果您不记得输入的内容，它会变得困惑

我的 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);   

     } );
}
}); 

非常感谢任何帮助

Answer 1

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

我为您评论了代码以解释发生了什么，您应该能够用您的 query 选项替换 data 选项，它仍然应该工作

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);
});