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()`方法来删除特定的数据项。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)