首页html5制作一个简单的本地存储页面

html5制作一个简单的本地存储页面

时间: 2023-08-06 20:07:12 浏览: 72

HTML5提供了本地存储的功能，可以使用localStorage对象来实现。以下是一个简单的示例，展示如何使用localStorage存储和读取数据： ```html <!DOCTYPE html> <html> <body> <h2>本地存储示例</h2> <input type="text" id="inputData" placeholder="输入数据"> <button onclick="saveData()">保存数据</button> <button onclick="loadData()">加载数据</button> <script> // 保存数据到localStorage function saveData() { var data = document.getElementById("inputData").value; localStorage.setItem("myData", data); alert("数据已保存"); } // 从localStorage加载数据 function loadData() { var data = localStorage.getItem("myData"); if (data) { alert("加载的数据：" + data); } else { alert("没有保存的数据"); } } </script> </body> </html> ``` 在这个示例中，我们使用了localStorage对象的`setItem()`方法来保存数据，`getItem()`方法来加载数据。当点击"保存数据"按钮时，会将输入框中的数据保存到localStorage中，并弹出提示框。当点击"加载数据"按钮时，会从localStorage中读取数据，并弹出提示框显示加载的数据。如果没有保存的数据，则会弹出相应的提示。请注意，这些数据存储在浏览器的本地，关闭浏览器后数据仍然会保留。如果需要清除数据，可以使用`removeItem()`方法来删除特定的数据项。