HTML中的数据存储

一  什么是Web Storage

         在HTML5中，除了新增canvas元素之外，还新增的非常重要的功能是可以在客户端本地保存数据的WebStorage功能。Web应用的发展，使得客户端存储功能使用得越来越多，而实现客户端存储的方式则是多种多样。最简单而且兼容性最佳的方案就是cookies，单数作为真正的客户端存储。顾名思义，WebStorage功能就是在Web上存储数据的功能，而这里的存储，是针对客户端本地而言的。

sessionStorage方法

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

 localStroage方法

         将数据保存在客户端本地的硬件设备中，即使关闭了浏览器，改数据仍然存在，下次打开浏览器访问网站仍然可以继续使用。 这两种不同的存储类型区别在于,sessionStorage为临时存储，而localStoage为永久保存。

二  使用WebStorage中的API

API	描述
length	获取当前WebStorage中的数目
key	返回WebStorage中的第N个存储条目
getItem(key)	返回指定key的存储内容，如果不存在则返回null。注意,返回的类型是字符串类型
setItem(key,value)	设置指定key的内容的值为value
removeItem(key)	根据指定的key，删除键值为key的内容
clear	清空webStorage的内容

下面就实现存储页面文字的放大缩小和更换颜色：

1.简单布局（主意在实现页面存储）

<div class="section">
			<p>
				床前明月光
			</p>
			<p>
				疑是地上霜
			</p>
			<p>
				举头望明月
			</p>
			<p>
				低头思故乡
			</p>
			
			<button class="btn big">放大</button>
			<button class="btn small">缩小</button>
			<button class="btn bgcolor" data-color = "red">红色</button>
			<button class="btn bgcolor" data-color = "green">绿色</button>
			<button class="btn bgcolor" data-color = "yellow">黄色</button>
</div>

2.编写jq实现数据存储

<script>
			
	$(function(){
		var num = localStorage.getItem("bigSize") || 16
		var color = localStorage.getItem("fontColor") || "black"
		$(".section").css("font-size",num+"px")
		$(".section p").css("color",color)
		$(".big").click(function(){
			num++
//			console.log(num)
			if(num>20){
				return
		}
					
		$(".section").css("font-size",num+"px")
			localStorage.setItem("bigSize",num)
		})
				
		$(".small").click(function(){
			num--
			if(num<12){
			num=12
			localStorage.setItem("bigSize",num)
		}
		$(".section").css("font-size",num+"px")
			localStorage.setItem("bigSize",num)
		})
				
		$(".bgcolor").click(function(){
			var color = $(this).data("color")
//			console.log(color)
		$(".section p").css("color",color)
		})
				
})			
			
</script>

要点：在localStorage中设置键值对可以应用setItem()

localStorage.setItem("key","value")

 在localStorage获取数据可以用getItem()

var val = localStroage.getItem("key")

 当然也可以直接使用localStorage的key方法，而不使用setItem()和getItem()，代码如下:

localStroage.key = "value" var val = localStroage.key

通过这个方法就可以将数据保存在客户端本地的设备中了，即使关闭了浏览器，改数据依然存在，下次打开浏览器访问网站仍然可以继续使用