HTML5本地存储Web Storage

最新推荐文章于 2024-05-06 16:18:18 发布

置顶 chengxuyuan123_

最新推荐文章于 2024-05-06 16:18:18 发布

阅读量153

点赞数

本文链接：https://blog.csdn.net/chengxuyuan123_/article/details/83781549

版权

介绍：
HTML5很好的提供了本地存储的功能，以键值对存储的解决方案，支持容量至少为4M,不用安全任何插件。HTML5的Web Storage提供了两种在客户端存储数据的方法。
（1）LocalStorage：是一种没有时间限制的数据存储方式，可以将数据永久的保存在客户端。
（2）sessionStorage：指的是针对一个session的数据存储，即将session保存在session对象中，当关闭浏览器后，这些数据会被删除。
Web Storage支持的属性和方法：
getItem(key)方法：获取指定key所存储的value值。
key(index)方法：返回列表中对应索引的key值。
length属性：返回key/value对列表的长度。
removeItem(key)方法：从Storage中删除一个对应的键值对。
setItem(key,value)方法：将value存储到key指定的字段。
clear()方法：移除storage中所有key/value对。
提示：设置、获取key/value的方法除了使用setItem()和getItem()方法之外，还分别提供了一个最简单的方法,设获取方法：alert(sessionStorage.someKey)
实现一个简易的web留言板，留言板信息可以永久保存，并能清除留言板内容，用的时候复制粘贴即可

<html>
 <head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			textarea {
				width: 400px;
				height: 200px;
			}
		</style>
	     <script type="text/javascript" src="js/jquery-3.0.0.js"></script>
		<script type="text/javascript">
		<!--添加留言信息的功能-->
			function addInfo() {
				var info = document.getElementById("t1");
				var LStorage = window.localStorage; //获取localStorage对象
				//判断对象中是否有myBoard键
				if(LStorage.myBoard) {
					var date = new Date();
					//获取原先键所对应的值再加上文本框中所输入的留言信息，也就是说，键所对应的值做累加。
					LStorage.myBorad += t1.value + "\n发表时间:" + date.toLocaleString() + "\n";
				} else {
					var date = new Date();
					//获取原先键所对应的值再加上文本框中所输入的留言信息，也就是说，键所对应 的值做累加。
					LStorage.myBoard = t1.value + "\n发表时间:" + date.toLocaleString() + "\n";
				}
				upInfo();
			}
			//清除留言信息
			function clearInfo() {
				window.localStorage.removeItem("myBoard");
				upInfo();
			}
			//取出键所对应的值显示在多行文本框中
			function upInfo() {
				var LStorage = window.localStorage; //获取localStorage对象
				var show = document.getElementById("show");
				if(window.localStorage.myBoard) {
					show.value = window.localStorage.getItem("myBoard");
				} else {
					show.value = "还没有留言";
				}
			}
		</script>
	</head>
<body>
  <div>
		<h2>简单的web存储留言板</h2>
		<textarea id="t1"></textarea><br/>
		<input type="button" class="button" onclick="addInfo()" value="留言" />
		<input type="button" class="button" onclick="clearInfo()" value="清除留言" />
		<br/>
		<hr/>
		<textarea id="show" readonly="readonly"></textarea>
  </div>
</body>