選擇多個值的選擇框的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);