HTML5中的数据存储

今天刚学习了HTML5中的数据存储，简单的学习了如何使用WebStorage中的api

1. length:获取当前WebStorage中的数目

2. key:返回WebStorage中的第N个存储条目

3.  

   getltem(key):返回指定key的存储内容，如果不存在则返回null.注意，返回的类型是字符串类型

4. setltem(key,value)：设置指定key的内容的值为value

5. 根据指定的key,删除键值为key的内容

6. clear:清空 WebStorage 的内容

下面是我所做的一些小练习的代码

效果：只要不关闭浏览器，当前的num值为一直存在，不会消失。

HTML代码

<button id="add">+</button>
		<button id="subtract">-</button>
		<p>0</p>

js代码

<script>
			var num=0
			var b=localStorage.getItem("c")||num
			$("p").html(b)
			$("#add").click(function(){
				b++
				localStorage.setItem("c",b)
				$("p").html(b)
			})
			
			$("#subtract").click(function(){
				b--
				if (b<0) {
					b=0
				}
				localStorage.setItem("c",b)
				$("p").html(b)
			})
		</script>

解析：

图中的变量b是获取所定义c的b值也就是++后的num

localStroage

         将数据保存在客户端本地的硬件设备中，即使关闭了浏览器，改数据仍然存在，下次打开浏览器访问网站仍然可以继续使用。

sessionStorage

         将数据保存在session对象中。所谓session,是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，即浏览这个网站所花费的事件。session对象可以用来保存在这段时间内索要保存的任何数据。