当输入不同的文本框时，程序以不同的方式处理相同的字符串

Question

我有一个程序应该将 link 组合在一起。和我的世界保存的工具栏一样，你可以保存link的集合，然后输入组名，它会打开所有的工具栏。

但是当名称被输入到文本框中以获取 link 时，我的程序无法从 localStorage 获取列表。但是当我只使用文本框的值 name 组时，它工作正常。

我的代码在这里：

var groupName = document.getElementById('name');
var link = document.getElementById('newLink');
var linkCounter = 0
var getByName = document.getElementById('getByName').value

function startGroup() {
  localStorage.setItem(groupName.value, groupName.value);
  console.log(localStorage.getItem(groupName.value))
}

function addLink() {
  linkCounter++;
  localStorage.setItem(groupName.value + '_link' + linkCounter, link.value);
  console.log(localStorage.getItem(groupName.value + '_link' + linkCounter))
}

function saveGroup() {
  localStorage.setItem(groupName.value + '_length', linkCounter);
  console.log(localStorage.getItem(groupName.value + '_length'))
  alert(groupName.value);
}

function getGroup() {
  // if I replace getByName with groupName.value, it works fine. 
  var len = localStorage.getItem(getByName + '_length')
  console.log(len)
  for (var x = 1; x <= len; x++) {
    window.open(localStorage.getItem(getByName + '_link' + x));
  }

}

<!DOCTYPE html>
<html>
<a href='readit.html'>READ THIS BEFORE USING</a>
<p>WHEN ADDING A LINK YOU NEED TO PASTE IT OR ADD HTTPS:// TO THE BEGINNING OF THE LINK.</p>
<div id='toolbars'>
  <p>Open a group!</p>
</div>
<div id='create'>
  <p>Create some bookmark groups!</p>
  <input type='text' placeholder='name your group' id='name'>
  <button onclick='startGroup()'>Let's add some links!</button>
  <br>
  <input type='text' placeholder='add a link' id='newLink'>
  <button onclick='addLink()'>Submit</button>
  <br>
  <button onclick='saveGroup()'>SAVE</button>
</div>

<div id='preview'>
  <br><br>
  <button onclick='getGroup()'>Open this group</button>
  <input type="text" id="getByName">
</div>

</html>
<script src="script.js"></script>

Answer 1

您正在 页面加载 读取 getByName 输入元素的值。相反，您应该在需要时读取该值。所以将 getByName 定义为 DOM 元素（而不是它的值）：

var getByName = document.getElementById('getByName');

在您当前引用 getByName 的位置，为 .value 属性访问器添加后缀。例如：

var len = localStorage.getItem(getByName.value + '_length');

旁注：我发现为所有数据使用内存数据结构更容易，并且当向其中添加内容时，将完整的数据结构写入一个本地存储密钥，JSON 格式.你可能想看看那个。

当输入不同的文本框时，程序以不同的方式处理相同的字符串

Program is treating the same string differently when entered into a different text box

html

javascript

dom

local-storage