HTML | DOM 存储 setItem() 方法(1)

📌 相关文章

📜 HTML | DOM 存储 setItem() 方法(1)

📅 最后修改于: 2023-12-03 15:15:36.253000 🧑 作者: Mango

HTML | DOM 存储 setItem() 方法

简介

在 HTML5 中，我们可以使用浏览器提供的 Web Storage API 存储数据，而其中的 localStorage 对象提供了 setItem() 方法用于向浏览器本地存储中添加数据。这个方法只能在客户端 JavaScript 中使用。

语法

localStorage.setItem(key, value);

参数

key: 一个字符串，用于标识这个数据项；
value: 一个字符串，表示要存储的数据。

使用示例

下面是一个简单的例子，将用户输入的值存储到本地存储中，同时在页面上显示出来：

<!DOCTYPE html>
<html>
<body>

<input type="text" id="input">
<button onclick="saveData()">Save</button>

<script>
function saveData() {
  var input = document.getElementById("input").value;
  localStorage.setItem("user_input", input);
  document.getElementById("output").innerHTML = "Saved: " + input;
}
</script>

<p id="output"></p>

</body>
</html>

在这个例子中，当用户输入文本并点击 "Save" 按钮时，saveData() 函数会取得文本框输入的值，然后使用 localStorage.setItem() 方法将这个值存储在本地存储中，键名为 "user_input"。最后，函数会将存储的值显示在页面上（以方便用户确认数据已存储成功）。

注意事项

localStorage 存储的数据类型只能为字符串类型，如果需要存储对象或其他数据类型，需要进行类型转换后再存储；
存储的数据量不能超过浏览器本地存储的容量限制，通常为 5 ~ 10 MB，存储量过大时浏览器会弹出警告消息；
在隐私模式下，浏览器禁止读写本地存储，可能会导致存储失败。

结论

使用 localStorage.setItem() 方法可以很方便地将数据存储在浏览器本地存储中，以使其持久化存储，可以用于实现诸如“记住密码”、“记录用户偏好等功能。需要注意的是，该方法只能在浏览器端使用，且存储的数据类型只能为字符串类型。