javascript - Trying to retain a user selection from a drop down menu across multiple pages -

so have written script knowledge management page allows user select list of states in drop down menu, , content on page tailored state selected.

<script type="text/javascript"> $(document).ready(function(){     $("select").change(function(){         $( "select option:selected").each(function(){             if($(this).attr("value")=="arizona"){                 $(".box").hide();                 $(".arizona").show();             }             if($(this).attr("value")=="arkansas"){                 $(".box").hide();                 $(".arkansas").show();             }         });     }).change(); }); </script> 

etc... 22 states. need retain user's selection between pages within domain. have tried far:

localstorage.setitem("state", "arizona"); localstorage.getitem('state'); 

i new js, , having issues getting work. not seem retain value. ideally need have 2 versions, 1 using local storage , 1 using session storage have internal , external customers different needs.

any appreciated.

i take closer @ localstorage api. there event fired whenever new item added storage: https://developer.mozilla.org/en-us/docs/web/api/web_storage_api/using_the_web_storage_api

that being said, state management in browser across multiple clients in offline/online modes on-the-fly updates not trivial "here let me whip script" problem.

a complete solution might include websockets server communication , database or in-memory cache acting state manager clients.