【Html5每日练习】本地存储localStorage

最新推荐文章于 2022-12-21 21:51:28 发布

原创最新推荐文章于 2022-12-21 21:51:28 发布 · 882 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #存储 #button #function #浏览器 #input

Html5 专栏收录该内容

4 篇文章

订阅专栏

本文通过一个简单的实例介绍了如何使用localStorage在浏览器中持久化存储数据。通过设置和获取数据的方法，展示了localStorage的基本用法，并与sessionStorage进行了对比。

上一篇博文中讲到了sessionStorage，今天来练习一下localStorage，其实localStorage很简单，只要将对象改一下就行，看代码

<!DOCTYPE html>
<html lang="en-US">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<input type="text" class="text" id="text" />
<input type="button" value="保存数据" onclick="setData();" />
<input type="button" value="获取数据" onclick="getData();" />
  
<script>
	var dataArr = [];
	var ele = document.getElementsByClassName("text")[0];  //利用类选择器获得元素
	function setData()
	{
		var data = ele.value; 
		dataArr.push(data);
		if("" == data)
			alert("输入信息不能为空");
		else
		{
			localStorage.setItem("boia",dataArr);
			alert("信息已保存到date字段中");
		}
	}

	function getData()
	{
		var data = localStorage.getItem("boia");
		if("" == data || null == data)
			alert("无数据");
		else
			alert("保存的数据是:"+data);
	}
</script>  
</html>

localStorage和sessionStorage的区别就是数据是永久保存在硬盘里的，所以把浏览器关了的话，数据是不会没了的