【Html5每日练习】本地存储之sessionStorage

最新推荐文章于 2022-09-01 10:55:21 发布

boia

最新推荐文章于 2022-09-01 10:55:21 发布

阅读量1.4k

点赞数

分类专栏： Html5 文章标签： html5 存储 button function cookies 浏览器

本文链接：https://blog.csdn.net/boiaprogramfan0420/article/details/7461410

版权

Html5 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Html5很强大，不仅添了新的选择器，而且还加了一个Web Storage，以前使用cookies总让我感到不爽，不过在这里我就侮辱它了，好歹也存活了那么多年了，今天就让我们来领略一下html5的风骚

<!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="保存数据" οnclick="setData();" />
<input type="button" value="获取数据" οnclick="getData();" />
  
<script>
	var dataArr = [];
	var ele = document.getElementsByClassName("text")[0];  //利用类选择器获得元素
	function setData()
	{
		var data = ele.value; 
		dataArr.push(data);
		if("" == data)
			alert("输入信息不能为空");
		else
		{
			sessionStorage.setItem("boia",dataArr);
			alert("信息已保存到date字段中");
		}
	}

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

这里我故意用了类选择器，还有一些CSS选择器的API函数，在这里我就不多说了，代码很简单，用了一个数组保存了用户输入的文本信息，然后将此数组里的数据用setItem()送到了浏览器，最后用getItem将数据读出来。