【HTML5与CSS3基础】HTML5本地存储 Web Storage

浏览数：24 / 时间：2015年06月09日

概述

本地存储Web Storage实际上是HTML4的Cookies存储机制的一个改进版本。它的作用是在网站中把有用的信息存储到本地的计算机或移动设备上，然后根据需要从本地读取信息。

Web Storage 有两种存储类型的API：

sessionStorage
localStorage

两者之间的差别在于生命周期：前者在会话期间有效；后者永久存储在本地，除非用户或程序对其执行删除操作。

浏览器支持情况：IE8.0以上，Chrome3.0以上。

API介绍

浏览器支持情况检测

<!DOCTYPE HTML>
<html>
<head><title>浏览器支持情况</title></head>
<body>
<script>
if(window.localStorage){
    alert("浏览器支持localStorage");
}
if(window.sessionStorage){
    alert("浏览器支持sessionStorage");
}
</script>
</body>
</html>

通过上述方法可以监测浏览器是否支持Web Storage的两种API .

localStorage

localStorage使用键值对进行数据的存储，共有一个属性：length，和5个操作：key、setItem、getItem、removeItem以及clear。下面是一个使用这些方法和属性的示例：

<!DOCTYPE HTML>
<html>
<head><title>localStorage</title></head>
<body>
<div id="x"></div>
<script type="text/javascript">
//存储数据
localStorage.setItem("1","床前明月光");

//弹出现有存储数据的大小
alert(localStorage.length);

//弹出所有的key（从0开始）
for(var i=0;i<localStorage.length;i++){
    alert(localStorage.key(i));
}


var x = document.getElementById("x");

//读取数据
x.innerHTML = localStorage.getItem("1");
/*
//删除数据
localStorage.removeItem("1");

//清除所有数据
localStorage.clear();
alert(localStorage.getItem("1"));
*/
</script>
</body>
</html>

此文件最好是部署在PHP（Java EE等）服务器平台上，直接打开在IE上可能用不了。

将删除数据的代码注释后，我们可以重新打开一次（即又存储一次数据），然后新建一个页面来读取数据，可以发现数据仍旧在，这就体现了localStorage的生命周期是永久存储着数据。

新建的用于读取数据的页面：

<!DOCTYPE HTML>
<html>
<head><title>localStorage</title></head>
<body>
<div id="x"></div>
<script type="text/javascript">
var x = document.getElementById("x");

//读取数据
x.innerHTML = localStorage.getItem("1");

</script>
</body>
</html>