如何在html上实现本地存储? [英] How to implement local storage on html?
本文介绍了如何在html上实现本地存储?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
(已更新)这是查看源.
(Updated)Here is the View Source.
例如:您有一个名称列表.我必须使用一个foreach循环，因为有100多个名称.用户选择名称后，单击该按钮，我就会在其中出现电话号码.我需要选中的名称才能保持选中状态.
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>
推荐答案
与其在服务器端进行操作，不如在客户端进行操作.
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>如果堆栈片段被沙盒化，请在 JSBin .
If the Stack Snippets are sandboxed, see the live preview at JSBin.
这篇关于如何在html上实现本地存储?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
