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

来源：互联网发布：软件项目开发计划书编辑：程序博客网时间：2024/05/17 23:42

概述

本地存储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>

这里写图片描述

两个页面都会显示“床前明月光”。

此处则需注意：不同的浏览器之间存储的数据是相互独立的，如果是使用的IE存储的数据，那么使用webkit是读不出来的。所以两个文件必须在同一浏览器中使用（换在国产浏览器里面，就是得都使用同一种模式，要么兼容，要么高速。）

sessionStorage

sessionStorage的使用方法和localStorage的使用方法相同，两者之间的差别在于localStorage在页面关闭重新后数据仍在，而sessionStorage的数据已消失.

在将上述两个文件的local替换为session后，打开，我们会看到一个页面会显示“床前明月光”，而另一个页面什么都不显示或显示“null”，这就是生命周期的差别。

这里写图片描述

1 0