How to implement local storage on html?

问题

(Updated)Here is the View Source.

For Example: You have a list of Names..I have to use a foreach loop because are over 100 names. And once the user selects the name, I have there phone number appears once you click on the button. I need the selected name to stay selected.

   <!DOCTYPE html> <!--Required in every html-->
<html>
<head>
    <!--Force browser to use latest version-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- link allows use of .css and script allows use of javaScript -->
    <!--<link rel="stylesheet" href="index.css"/>
    <script src="init.js"></script>-->
<script>
function doFirst(){

}
</script>
</head>
<body>
    <!--<button id='button'>Click me!</button>-->
    <!--  -->
<h1>    Friday 11-04-2016<br></h1>


    <form action='index.php' method='post'>
        Afternoon Shift Supervisor:
  <select name="name"> <!-- COMBO Box PLUS onchange="submit();return false; makes data appear on selection, refreshs page"-->
                                <!-- AMOUNT(PROID), THEN FILL WITH THE CONTENT(PRONAME)-->
                <option value="Declicious Apples!">Declicious Apples!</option>

                                <!-- AMOUNT(PROID), THEN FILL WITH THE CONTENT(PRONAME)-->
                <option value="Comfy">Comfy</option>

                                <!-- AMOUNT(PROID), THEN FILL WITH THE CONTENT(PRONAME)-->
                <option value="GREEN">GREEN</option>


        </select>
  <script>
var select = document.querySelector("name")[0];
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);
}
function updateSelection(which) {
  if (typeof localStorage != "undefined")
    localStorage.setItem("select", which.value);
}
window.onload = function () {
  if (typeof localStorage != "undefined")
    document.querySelector("#sel").value = localStorage["select"];
};*/
</script>

                    phone # :  Comfy
    <br>    On Call Supervisor:
        <select name="name2"> <!-- COMBO Box -->
                                <!-- AMOUNT(PROID IS VALUE..ASSOCIATIVE ARRAY), THEN FILL WITH THE CONTENT(PRONAME)-->
                <option value="Declicious Apples!">Apples</option>  <!-- ASSOCIATIVE ARRAY PRODDESC WILL BE OUTPUT-->
                                <!-- AMOUNT(PROID IS VALUE..ASSOCIATIVE ARRAY), THEN FILL WITH THE CONTENT(PRONAME)-->
                <option value="Comfy">Jeans</option>    <!-- ASSOCIATIVE ARRAY PRODDESC WILL BE OUTPUT-->
                                <!-- AMOUNT(PROID IS VALUE..ASSOCIATIVE ARRAY), THEN FILL WITH THE CONTENT(PRONAME)-->
                <option value="GREEN">VEGGIES</option>  <!-- ASSOCIATIVE ARRAY PRODDESC WILL BE OUTPUT-->
                        </select>

              <!--  TESTING TO VERIFY I GET VALUE OF WHAT WAS SELECTED WORKS!  -->
   Phone #: Declicious Apples! <br><input type='submit' id='click me' value='Submit'><br/>

I have also tried(neither are saving the selected value when the page refreshes):

  <script>
var select = document.querySelector("name");
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);
}
</script>
<form action='index.php' method='post'>
        Afternoon Shift Supervisor:
  <select name="name">              
<?php foreach($data as $i=>$rows): ?>

<option value="<?=$rows['PRODDESC']?>"><?=$rows['PRODDESC']?></option>

            <?php endforeach; ?>

        </select>
        <?php $name = $_POST["name"];?>
        phone # :  <?php echo $name; ?>
 <br><input type='submit' name='click me' value='Submit'><br/>
 </form>

回答1:

Instead of doing it in the server side, use the client side to make it possible.

function updateSelection(which) {
  if (typeof localStorage != "undefined")
    localStorage.setItem("select", which.value);
}
window.onload = function () {
  if (typeof localStorage != "undefined")
    document.querySelector("#sel").value = localStorage["select"];
};

<select id="sel" onchange="updateSelection(this);">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
  <option value="5">Option 5</option>
</select>

If the Stack Snippets are sandboxed, see the live preview at JSBin.

来源：https://stackoverflow.com/questions/40407777/how-to-implement-local-storage-on-html

标签

javascript

php

html

local-storage