Как реализовать локальное хранилище на html?

(Обновлено) Вот источник просмотра.Как реализовать локальное хранилище на html?

Например: у вас есть список имен. Мне нужно использовать цикл foreach, потому что это более 100 имен. И как только пользователь выбирает имя, у меня есть номер телефона, который появляется после нажатия кнопки. Мне нужно, чтобы выбранное имя оставалось выбранным.

<!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/>

Я также попытался (ни спасаем выбранное значение, когда страница обновляется):

<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>

источник

2016-11-03 Nameishi

Для этого потребуются файлы cookie, локальное хранилище или сохранение выбранного значения на сервере. – adeneo

@adeneo спасибо, я верю, что это поможет, но теперь я попытался его реализовать, но все равно не меняю. Должен ли я задать новый вопрос? – Nameishi

@Nameishi Вы поняли, что код на стороне сервера не будет работать, и вы сказали, что пытались реализовать. В этом же вопросе добавьте это как обновление, отредактировав свой вопрос и добавив содержимое в конец. –

Вместо того, чтобы делать это на стороне сервера, использование клиентская сторона, чтобы сделать это возможным.

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>

Если стек Отрывки песочницы, см предварительного просмотра в JSBin.

источник

2016-11-03 17:36:04

Все еще не сохраняет для меня, я добавил ваш скрипт и внесли изменения в свой HTML ниже: – Nameishi

@Nameishi Добавить обновленный код в свой вопрос. Не могу понять, что вы написали. –

спасибо за подсказку, я только что обновил – Nameishi

Как реализовать локальное хранилище на html?

ответ

Смежные вопросы