HTML5 WEB 存储

WEB 存储

使用HTML5可以在本地存储用户的浏览数据。
早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储
大量的数据，而不影响网站的性能.
数据以 键/值 对存在, web网页的数据只允许该网页访问使用。
在 HTML5 中提供了 WEB 存储的 API ，允许在硬盘上存储数据（持久化）。
API 可以分为两部分：
信息必须且只在会话过程中使用 - sessionStorage
信息长期保存且有用户决定时长 - localStorage

语法

• setItem(key,value)：用键值对创建项目，主键存在则更新值。
• getItem(key)：根据主键获取对应的值。
• removeItem(key)：根据主键删除指定项。
• clear()：清空整个存储空间，删除所有项。

sessionSrorage

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

<p>
<h2 id="msg"></h2>
</p>
<p>
  <input type="text" id="key" required>
  <input type="text" id="value" required><br>
  <button type="button" onclick="save()" name="button">save</button>
  <button type="button" onclick="read()" name="button">read</button>
</p>
<script type="text/javascript">
  function save() {
    var key = document.getElementById("key").value;
    var value = document.getElementById("value").value;
    sessionStorage.setItem(key,value);//保存
  }
 
  function read() {
    var key =document.getElementById("key").value;
    var msg= document.getElementById("msg");
    msg.innerHTML = sessionStorage.getItem(key);//根据key获取value
  }
</script>

localStorage

在窗口会话期间临时存储数据，某些情况下可用，但是如果想摸你桌面应用，临时的数据存储系统就不够用了。
为了解决这个问题，API 提供了另一个系统，为每个来源保留了一个存储空间，并保存信息持久可用 - localStorage。
利用 localStorage，可以保存大量数据，并有用户决定信息是否保留。
localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

<script>
function clickCounter()
{
	if(typeof(Storage)!=="undefined")//localStorage 的浏览器支持判断
	{
		if (localStorage.clickcount)
		{
			localStorage.clickcount=Number(localStorage.clickcount)+1;
		}
		else
		{
			localStorage.clickcount=1;
		}
		document.getElementById("result").innerHTML=" 你已经点击了按钮 " + localStorage.clickcount + " 次 ";
	}
	else
	{
		document.getElementById("result").innerHTML="对不起，您的浏览器不支持 web 存储。";
	}
}
</script>
<p><button onclick="clickCounter()" type="button">点我！</button></p>
<div id="result"></div>