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.简单布局（主意在实现页面存储）

			

				床前明月光
			
			

				疑是地上霜
			
			

				举头望明月
			
			

				低头思故乡
			
			
			放大
			缩小
			红色
			绿色
			黄色

2.编写jq实现数据存储

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

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

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

var val = localStroage.getItem("key")

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

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

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