选择多个值的选择框的HTML5本地存储存储表单数据

Question

我有一个表单，它将用户的优先级保存在本地存储中，它可以在this fiddle or below中看到。

我到目前为止有两个主要问题。

1. 单击保存按钮时，您将清空myStorage，然后追加刚选择的内容，以便他们可以看到他们点击的结果。它只记得你是否重新演奏小提琴。

2. 我最大的问题是，我有很多选择字段有一个选项，但在这种情况下，用户可以选择多个，所以我需要添加到它，以便用户可以将多个值保存到本地存储所以下次他们加载页面时会保存多个选择？

   <form name="Filter"> 
   <select multiple="1" id="filter"> 
       <option value="111">Andrew</option> 
       <option value="222">Bill</option> 
       <option value="333">Charles</option> 
       <option value="444">Dikembe</option> 
       <option value="555">Edward</option> 
   </select> 
   </form> 
   <div id="store">click to store</div> 
   <br> 
   <h3>People I have stored</h3> 
   
   <div id="myStorage"></div> 
   

JS

var iSelectedTitle = localStorage.getItem('title'); 
    var iSelectedVal = localStorage.getItem('value'); 
    console.log("iSelectedTitle: " + iSelectedTitle); 
    console.log("iSelectedVal: " + iSelectedVal); 

    $("#filter option").each(function() { 
     if ($(this).val() == iSelectedVal) { 
      $(this).attr("selected", "selected"); 
     } 
    }); 

    $("#store").click(function() { 
     var mytitle = $("#filter option:selected").text(); 
     var storedTitle = localStorage.setItem("title", mytitle); 
     console.log("mytitle: " + mytitle); 
     console.log("storedTitle: " + storedTitle); 

     var myValue = $("#filter option:selected").val(); 
     var storedValue = localStorage.setItem("value", myValue); 
     console.log("myValue: " + myValue); 
     console.log("storedValue: " + storedValue); 

     if (iSelectedTitle != "undefined") { 
      $('#myStorage').empty().append(iSelectedTitle); 
     } 
    }); 
    if (iSelectedTitle != "undefined") { 
     $('#myStorage').append(iSelectedTitle + ' - <a target= "_blank "href="http://www.example.com/' + iSelectedVal + '">View profile</a>'); 
    } 

Answer 1

后，您可以添加多个选项，使用map jQuery的数组：

var optArray = $("#filter option:selected").map(function() { 
     return { 
      "title": this.innerHTML, 
      "value": this.value 
     } 
}).get(); 

这会给你一个漂亮的阵列是这样的：

[ 
    { "title": "Andrew", "value": "111" }, 
    { "title": "Bill", "value": "222" }, 
    { "title": "Charles", "value": "333" } 
] 

用于添加到localStorage的：

$("#store").click(function() { 
    //get the selected options in the form of an array 
    var optArray = $("#filter option:selected").map(function() { 
     return { 
      "title": this.innerHTML, 
      "value": this.value 
     } 
    }).get(); 
    console.log(optArray); 
    //set that to localStorage 
    localStorage["optArray"] = JSON.stringify(optArray); 
    //refresh myStorage 
    getFromStore(); 
}); 

对于刷新与新添加的人myStorage容器，你必须把这种处理器的`点击事件（上图）中的最后一个事件。

var getFromStore = function() { 
    //check if store values are null, if null, make store =[] 
    var store = [undefined, null].indexOf(localStorage["optArray"]) != -1 ? [] : JSON.parse(localStorage["optArray"]); 
    console.log(store); 
    //empty container before u put values 
    $('#myStorage').html(''); 
    //check if store is empty 
    if (store.length != 0) { 
     //loop over store if it aint empty and append the content into myStorage div 
     for (var k in store) { 
      var str = '<div>' + store[k]["title"] + ' - <a target= "_blank" href="http://www.example.com/' + store[k]["value"] + '">View profile</a></div>'; 
      console.log(store[k]); 
      $('#myStorage').append(str); 
     } 
    } else { 
     //do this if no data is found in localStorage 
     $("#myStorage").html("No people found in store"); 
    } 
} 

然后，在DOM ready，叫getFromStore刷新myContainer在页面加载：

$(function() { 
    getFromStore(); 
}) 

演示：http://jsfiddle.net/hungerpain/hqVGS/9/

编辑

要选择默认的复选框，在中添加下面的行0功能：

$("[value=" + store[k]["value"] + "]","#filter").prop("selected", true); //find the option with the corresponding value and select it 

更新演示：http://jsfiddle.net/hungerpain/hqVGS/10/

Answer 2

你可以在一个阵列保存多个值，

var myValuesArr = ['one','two','three']; 

的阵列将需要之前将其保存到localStorage

被序列化

var serialVals = JSON.stringify(myValuesArr); 
localStorage.setItem('numbers',serialVals); 

同样，存储的数据将不得不去系列化它读回

var serialVals = localStorage.getItem('numbers'); 
var myValuesArr = JSON.parse(serialVals);