Comment utiliser LocalStorage sur la dernière valeur de sélection de HTML

Comment puis-je définir / récupérer la dernière valeur sélectionnée d'un menu déroulant sélectionné avec JavaScript? J'essaie de créer une fonction onchange sur un menu déroulant sélectionné qui définit l'option sélectionnée, puis sur chaque page-charge, cette valeur est chargée.

Voici le HTML

<select class="testSelect"> <option value="test1">test1</option> <option value="test2">test2</option> <option value="test2">test3</option> <option value="test2">test4</option> </select> 

J'ai néanmoins un petit problème avec JavaSCript.

 var select = document.querySelector(".testSelect"); var selectOption = select.options[select.selectedIndex]; var getLast = localStorage.getItem(select, lastSelected); selectOption = getLast; select.onchange = function () { var lastSelected = select.options[select.selectedIndex].value; localStorage.setItem(select, lastSelected); } 

Et voici une violon http://jsfiddle.net/5yJNL/1/

Les valeurs dans votre HTML étaient fausses

 <select class="testSelect"> <option value="test1">test1</option> <option value="test2">test2</option> <option value="test3">test3</option> <option value="test4">test4</option> </select> 

Javascript

 var select = document.querySelector(".testSelect"); var selectOption = select.options[select.selectedIndex]; var lastSelected = localStorage.getItem('select'); if(lastSelected) { select.value = lastSelected; } select.onchange = function () { lastSelected = select.options[select.selectedIndex].value; console.log(lastSelected); localStorage.setItem('select', lastSelected); } 

http://jsfiddle.net/2MPPz/1/

Vous avez au moins deux problèmes dans votre code.

  1. Le premier est un problème de portée: la lastSelected variable sélectionnée est définie localement dans votre fonction. Vous devez définir comme variable globale.

  2. Le second est que le premier paramètre des méthodes setItem & getItem devrait être une String

Ainsi, votre code corrigé ressemble à:

 var lastSelected; var select = document.querySelector(".testSelect"); var selectOption = select.options[select.selectedIndex]; var getLast = localStorage.getItem('select', lastSelected); selectOption = getLast; select.onchange = function () { lastSelected = select.options[select.selectedIndex].value; localStorage.setItem('select', lastSelected); };