HTML 5 基础教程

什么是 HTML5 Web 数据存储？

• 数据以 键/值 对存在, Web网页中存储的数据只允许该网页所属的域名访问使用。
• HTML5 提供了两种在客户端存储数据的新方法：
  • localStorage - 没有时间限制的数据存储，用于长久保存整个网站的数据，保存的数据没有过期时间，除非手动删除
  • sessionStorage - 针对一个 session 的数据存储，用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后系统将会自动删除这些数据
• 对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身存储的数据
• HTML5 使用 JavaScript 来存储和访问数据
• 提供可存储大量数据而不影响网站性能的功能

为什么需要数据存储？

• Internet Explorer 8+，Firefox，Opera，Chrome，和 Safari 都支持HTML5 Web 存储功能
• Internet Explorer 7 及更早IE版本不支持 Web 存储
• 在使用 HTML5 Web 存储之前，我们应检查浏览器是否支持 localStorage 和 sessionStorage

if( typeof(Storage) !=="undefined" )  {
    //您的浏览器支持 localStorage  sessionStorage 对象!
    // 处理数据的代码.....
} else {
    // 您的浏览器不支持 web 存储。
}

一、使用 localStorage  存储字符串、数组、对象

1. 使用 localStorage 的 setItem方法（或者以添加属性的方式）来存储数据
2. 使用 localStorage 的 getItem方法（或者以读取属性的方式）来取出数据

<div id="result"></div>
<script type="text/javascript">
    // 浏览器兼容性检查
    if (typeof(Storage) !== "undefined") {

        // 存储字符串
        localStorage.setItem("name", "jesen");

        //存储数组
        //var array = [1,2,3,4,5,6];
        //localStorage.setItem("array", JSON.stringify(array));

        //存储对象
        //var person = {"name":"jesen","age":20};
        //localStorage.setItem("person", JSON.stringify(person));

        // 显示存储的数据
        document.getElementById("result").innerHTML = localStorage.getItem("name");
        //document.getElementById("result").innerHTML = JSON.parse(localStorage.getItem("array")).length;
        //document.getElementById("result").innerHTML = JSON.parse(localStorage.getItem("person")).name;

    } else {
        document.getElementById("result").innerHTML = "您的浏览器不支持 Web Storage ...";
    }
</script>

二、使用 localStorage 实现页面访问次数的记录

<p>刷新页面会看到计数器在增长。</p>
<p>请关闭浏览器窗口，然后再试一次，计数器会继续计数。</p>
<script type="text/javascript">
    if (localStorage.pagecount)  {
        localStorage.pagecount=Number(localStorage.pagecount) +1;
    } else {
        localStorage.pagecount=1;
    }
    document.write("访问次数: " + localStorage.pagecount + " 次");
</script>

一、使用 sessionStorage 存储字符串、数组、对象

<p><button onclick="clickCounter()" type="button">请点击这里</button></p>
<div id="result"></div>
<p>请点击按钮使计数器递增。</p>
<p>请关闭浏览器或标签页，然后再试一次，计数器会重置。</p>

<script type="text/javascript">
    function clickCounter() {
        if(typeof(Storage) !== "undefined") {
            if (sessionStorage.clickcount) {
                sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
            } else {
                sessionStorage.clickcount = 1;
            }
            document.getElementById("result").innerHTML = "在当前 session（会话） 中，您已经点击这个按钮 " + sessionStorage.clickcount + " 次。";
        } else {
            document.getElementById("result").innerHTML = "您的浏览器不支持 Web Storage ...";
        }
    }
</script>

二、使用 sessionStorage 实现页面在当前session（网页会话）中访问次数的记录

<p>刷新页面会看到计数器在增长。</p>
<p>请关闭浏览器窗口，然后再试一次，计数器已经重置了。</p>

<script type="text/javascript">

    if (sessionStorage.pagecount)  {
        sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
    }
    else  {
        sessionStorage.pagecount=1;
    }
    document.write("您访问了该页面第 " + sessionStorage.pagecount + " 次.");

</script>