如何通过 Jquery 的 select2 插件使用 HTML5 的 localstorage答案

【问题标题】：How to use HTML5's localstorage with Jquery's select2 plugin如何通过 Jquery 的 select2 插件使用 HTML5 的 localstorage
【发布时间】：2014-10-15 08:32:29
【问题描述】：

有没有办法将 HTML5 的 localstorage 方法与 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);   

     } );
}
});

非常感谢任何帮助

【问题讨论】：

您的意思是要重新选择已选择的项目？（只是想澄清）
@bruchowski 嗯，是的，我希望已经输入的项目出现，一般来说，项目要留下

标签： javascript jquery html jquery-select2

【解决方案1】：

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

我为您注释了代码以解释发生了什么，您应该可以将data 选项换成query 选项，它应该仍然可以工作

PS：我注意到你回答的问题都没有被标记为“接受”，如果有人给你一个你喜欢或适合你的答案，你应该点击答案旁边的复选框将他们的答案标记为“接受”

HTML

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

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

【讨论】：

这太棒了！非常感谢！ :-)
当我清除缓存并返回页面时，字段为空。如何将已输入的数据加载到其中？我有一个远程端点，我想使用 .get('path to remote json') 将以前输入的项目加载到输入字段中
localStorage 不是永久的，如果你想长期保存它们，你应该保存到数据库中
是的，你是对的！实际上，我正在发布到数据库，所以基本上，显示已经输入的已保存到数据库中的项目是最初的想法......

【解决方案2】：

除了@bruchowski 的回答之外，新版本的 Select2 有不同的处理方式（但仍支持 initSelection 和 query 以实现向后兼容性）：

您必须创建自定义DataAdapter 并实现current() 和query()。

【讨论】：

DataAdapter 是一个相当繁重的解决方案（并且需要对您的代码进行 AMD 化）。当前的解决方案包括 1. 呈现您的 html 选择 2. 检查 localStorage 或 ajax 以更新 HTML 3. 应用 select2