用於多個選擇選項下拉菜單的本地存儲

Question

我有多個選擇選項下拉菜單，並且希望使用本地存儲來保存用戶選擇後的選擇。這是HTML的一個例子：我用這個代碼從另一個帖子，我發現

<div class="sel_container"> 
    <select onchange="saveChoice()" id="select_color" class="test"> 
     <option value="">Choose color</option> 
     <option value="red">red</option> 
     <option value="blue">blue</option> 
     <option value="green">green</option> 
    </select> 
    <select id="select_type" class="test" onchange="saveChoice()"> 
     <option value="">Choose size</option> 
     <option value="small">small</option> 
     <option value="medium">medium</option> 
    </select> 
</div> 

和它的作品保存選項之一：

$(function() { 
    $('#select_color').change(function() { 
     localStorage.setItem('todoData', this.value); 
    }); 
    if(localStorage.getItem('todoData')){ 
     $('#select_color').val(localStorage.getItem('todoData')); 
    } 
}); 

我是新JavaScript和做一些後閱讀它似乎我需要做一個JSON stringify，但我真的很困惑這個的語法。我試着用這個，它不工作：

var obj = { 
    "#select_color": this.value, 
    "#select_type": this.value 
} 
var stringifyObj = JSON.stringify(obj); 

任何幫助，這是非常感謝！謝謝！

Answer 1

您不需要爲此專門使用對象或JSON。你可以做的是通過使它更通用來改進你的代碼，以便它適用於select的任何實例。

你給他們兩個.test類，所以你可以選擇。然後，您可以設置本地存儲中的值select的id，該值可在頁面加載時檢索。嘗試這個;

$('.test').change(function() { 
    localStorage.setItem(this.id, this.value); 
}).val(function() { 
    return localStorage.getItem(this.id) 
}); 

Working example