首页js 点击储存按钮将输入的值使用localStorage储存点击读取按钮读取储存的内容完整代码示例

js 点击储存按钮将输入的值使用localStorage储存点击读取按钮读取储存的内容完整代码示例

时间: 2024-12-21 13:24:27 浏览: 23

当然，这里是一个简单的JavaScript代码示例，展示了如何在点击存储和读取按钮时使用`localStorage`来保存用户输入并读取内容： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>LocalStorage Example</title> </head> <body> <input type="text" id="inputField" placeholder="请输入值"> <button onclick="storeValue()">存储</button> <br><br> <button onclick="readValue()">读取</button> <p id="displayValue"></p> <script> function storeValue() { const inputValue = document.getElementById("inputField").value; localStorage.setItem("storedValue", inputValue); alert("已成功存储值!"); } function readValue() { const storedValue = localStorage.getItem("storedValue"); if (storedValue) { document.getElementById("displayValue").innerText = "存储的值: " + storedValue; } else { document.getElementById("displayValue").innerText = "还未存储任何值"; } } </script> </body> </html> ``` 在这个例子中： 1. 当用户点击“存储”按钮时，会调用`storeValue()`函数，获取输入框内的值，并将其存入`localStorage`，键名为`storedValue`。 2. 当用户点击“读取”按钮时，调用`readValue()`函数，从`localStorage`中取出`storedValue`并显示在页面上。请注意，`localStorage`通常用于临时存储非敏感数据，因为它是本地存储，数据不会经过加密处理，适合小量、低频率的数据存储。

阅读全文