带有数组的 HTML 5 本地存储 [重复]
Posted
技术标签:
【中文标题】带有数组的 HTML 5 本地存储 [重复]【英文标题】：HTML 5 Local Storage with array [duplicate] 【发布时间】：2019-01-29 07:15:54 【问题描述】：var Words = ['little', 'lump', 'house', 'begs', 'software']; // Word Array
var word = Words[Math.floor(Math.random() * Words.length)]; // calls random word
console.log(word); <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="Css.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="Javascript.js"></script>
</head>
<body>
<body>
<h1 class="gamefunc">Add words here!</h1>
<form class="title" id="frm1">
<br>
Word: <input type="text" name="newWord" id="words">
<br>
<br>
<button type="button" class="btn4" onclick="myFunction()">Submit Word</button>
<br>
<a href="Home.html"><button class="btn4" id="addWord" type="button">Home</button></a>
</form>
<br>
<script>
function myFunction()
var x = document.getElementById("words").value;
console.log(x);
Words.push(x);
console.log(Words)
</script>
</body>
</html>我已经在我的代码中将单词推送到一个数组，但我想要实现的是能够在本地或会话中将推送的单词存储在数组中，这样当我在我的 html 页面之间进行更改时，新添加的单词将在数组
【问题讨论】：
【参考方案1】：一种选择是使用sessionStorage，如下所示：
function myFunction()
var x = document.getElementById("words").value;
console.log(x);
Words.push(x);
sessionStorage.setItem('Words', Words);
console.log(Words)
var Words = sessionStorage.getItem('Words');
if (Words == null)
Words = ['little', 'lump', 'house', 'begs', 'software'];
else
Words = Words.split(',');
<h1 class="gamefunc">Add words here!</h1>
<form class="title" id="frm1">
<br> Word: <input type="text" name="newWord" id="words">
<br>
<br>
<button type="button" class="btn4" onclick="myFunction()">Submit Word</button>
<br>
<a href="Home.html"><button class="btn4" id="addWord" type="button">Home</button></a>
</form>请注意，由于沙盒模式，您将无法在 Stack Overflow 上运行此 sn-p，但如果您在浏览器中本地运行此程序，您会看到它会按预期运行。
【讨论】：
@AuxTaco 不错。我已经调整了答案来解决这个问题。以上是关于带有数组的 HTML 5 本地存储 [重复]的主要内容，如果未能解决你的问题，请参考以下文章
HTML5的local storage存储的数据到底存到哪去了