HTML的本地存储

1.初始WebStorage

2.使用WebStorage中的API

一.什么是Web Storage

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

         1.大小:cookies的大小被限制在4KB

         2.宽带：cookies是随HTTP事务一起发送的，因此会浪费一部分发送cookies时使用的宽带。

         3.复杂:cookies操作起来是标胶麻烦:所有的信息要被拼到一个长字符串里面。

         4.联系:对cookies来说，在相同的站点与多事务处理保持联系不是很容易。

         在这种情况下，在HTML5中重新提供了在客户端本地保存数据的功能，它就是WebStroge功能。

         顾名思义，WebStorage功能就是在Web上存储数据的功能，而这里的存储，是针对客户端本地而言的。它包含两种存储类型：sessionStorage和localStroage二者都支持在同域下存储5MB数据，与cookies相比有着明显的优势。

         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的内容

2.1 数据的存储与获取

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

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

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

var val = localStorage.setItem("key")

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

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

2.2 数据的删除和清空

removeItem()用于Stroage列表删除数据

var val = localStroage. removeItem(key)

clear()方法用于清空整个列表的所有数据

localStroage.clear()

同时可以通过使用length属性获取sessionStorage中存储的键/值对的个数