如何在html上实现本地存储？
Posted
技术标签:
【中文标题】如何在html上实现本地存储？【英文标题】：How to implement local storage on html? 【发布时间】：2017-03-17 09:47:51 【问题描述】：（更新）这里是查看源代码。
例如：您有一个名称列表。我必须使用 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>
【问题讨论】：
这将需要 cookie、本地存储或将所选值存储在服务器上。 @adeneo 谢谢我相信这会有所帮助，但现在我尝试实现它，但仍然没有改变。我应该提出一个新问题吗？ @Nameishi 你明白了，服务器端代码不起作用，你说你试图实现。在同一个问题中，将其添加为更新，editing 您的问题并在末尾添加内容。 【参考方案1】：不要在服务器端做这件事，而是使用客户端使其成为可能。
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 的实时预览。
【讨论】：
仍然没有为我保存，我添加了您的脚本并在下面对我的 HTML 进行了更改： @Nameishi 在您的问题中添加更新的代码。看不懂你写了什么。 @Nameishi 你所做的是对的。唯一的问题是，请将脚本块放在 select 元素下方，可能在页面末尾。 我只是把脚本放在了下面还是没有用。 @Nameishi 你能打开控制台（F12）并告诉我那里显示什么吗？比如错误什么的。打开控制台this way。以上是关于如何在html上实现本地存储？的主要内容，如果未能解决你的问题，请参考以下文章