Web Storage功能，顾名思义，就是在Web上存储数据的功能，而这里的存储，是针对客户端本地而言的。它包含两种不同的存储类型：Session Storage和Local Storage。 不管是Session Storage还是Local Storage，它们都能支持在同域下存储5MB数据。
sessionStorage
将数据保存在session对象中。所谓session，是指用户在浏览某个网站时，
从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的
时间。Session对象可以用来保存在这段时间内所要求保存在任何数据。
localStorage
将数据保存在客户端本地的硬件设备中，即使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用.这两种不同的存储类型区别在于，sessionStorage为临时保存，而为永久保存。
使用WebStorage中的API
下面我们讲解如何使用WebStorage的API。目前WebStorage
的API有如下这些：
Length：获得当前webstorage中的数目。
key(n)：返回webstorage中的第N个存储条目。
getItem(key)：返回指定key的存储内容，如果不存在则返回null。注意，返回的类型是String字符串类型。
setItem(key, value)：设置指定key的内容的值为value。
removeItem(key)：根据指定的key，删除键值为key的内容。
clear：清空webstorate的内容。
数据的存储与获取
在localStorage中设置键值对数据可以应用setItem()，代码如下所示：
localStorage.setItem("key", "value);
获取数据可以应用getItem()，代码如下所示：
var val = localStorage.getItem("key");
当然也可以直接使用localStorage的key方法，而不使用setItem和getItem方法，如下；
localStorage.key = "value";
var val = localStorage.key;
HTML5存储是基于键值对（key/value）的形式存储的，每个键值对称为一个项（item）
存储和检索数据都是通过指定的键名，键名的类型是字符串类型。值可以是包括字符串、布
尔值、整数，或者浮点数在内的任意JavaScript支持的类型。但是，最终数据是以字符串类
型存储的。
调用结果是将字符串value设置到sessionStorage中，这些数据随后可以通过键key获取。
调用setItem()时，如果指定的键名已经存在，那么新传入的数据会覆盖原先的数据。调用
getItem()时，如果传入的键名不存在，那么会返回null，而不会抛出异常。
数据的删除和清空
removeItem()用于从Storage列表删除数据代码如下：
var val = sessionStorage.removeItem(key);
也可以通过传入数据项的key从而删除对应的存储数据，代码如
下：
var val = sessionStorage.removeItem(1);
说明：数字1会被转换为string，因为key的类型就是字符串。
clear()方法用于清空整个列表的所有数据，代码如下：
sessionStorage.clear();
同时可以通过使用length属性获取Storage中存储的键值对的个
数：
var val = sessionStorage.length;
注意：removeItem可以清除给定的key所对应的项，如果key
不存在则“什么都不做”；clear会清除所有的项，如果列表本
来就是空的就“什么都不做”。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>sessionStorage与localStorage区别</title>
</head>
<body>
<h1>计数器</h1>
<p class="msg" id="msg_1"> </p>
<p class="form_item"><label for="">要保存的数据：</label>
<input type="text" name="text-1" value="" id="text-1"/></p>
<p class="form_item">
<input type="button" name="btn-1" value="session保存" id="btn-1"/>
<input type="button" name="btn-2" value="session读取" id="btn-2"/>
</p>
<p class="form_item">
<input type="button" name="btn-3" value="local保存" id="btn-3"/>
<input type="button" name="btn-4" value="local读取" id="btn-4"/>
</p>
<p class="count_wrap">
session计数：<span class="count" id='session_count'></span>
local计数：<span class="count" id='local_count'></span></p>
<script>
function getE(ele){ //自定义一个getE()函数
return document.getElementById(ele); //返回并调用document对象的getElementById方法输出变量
}
var text_1 = getE('text-1'), //声明变量并为其赋值
mag = getE('msg_1'),
btn_1 = getE('btn-1'),
btn_2 = getE('btn-2'),
btn_3 = getE('btn-3'),
btn_4 = getE('btn-4');
btn_1.onclick = saveSessionStorage;
btn_2.onclick = loadSessionStorage;
btn_3.onclick = saveLocalStorage;
btn_4.onclick = loadLocalStorage;
function saveSessionStorage(){
sessionStorage.setItem('msg',text_1.value + 'session');
}
function loadSessionStorage(){
mag.innerHTML = sessionStorage.getItem('msg');
}
function saveLocalStorage(){
localStorage.setItem('msg',text_1.value + 'local');
}
function loadLocalStorage(){
mag.innerHTML = localStorage.getItem('msg');
}
//记录页面次数
var local_count = localStorage.getItem('a_count')?localStorage.getItem('a_count'):0;
getE('local_count').innerHTML = local_count;
localStorage.setItem('a_count',+local_count+1);
var session_count = sessionStorage.getItem('a_count')?sessionStorage.getItem('a_count'):0;
getE('session_count').innerHTML = session_count;
sessionStorage.setItem('a_count',+session_count+1);
</script>
</body>
</html>
