上一节:
下一节:

  HTML Web Storage

  • HTML5 Web Storage

    通过Web Storage，Web应用程序可以在用户的​​浏览器中本地存储数据。在HTML5之前，应用程序数据必须存储在cookie中，包含在每个服务器请求中。Web Storage更安全，可以在本地存储大量数据，而不会影响网站性能。与cookie不同，存储限制要大得多（至少5MB），信息永远不会传输到服务器。Web存储是按来源（每个域和协议）。来自一个来源的所有页面都可以存储和访问相同的数据。

  • 浏览器支持

    Internet Explorer Chrome FireFox Safari Opera
    8.0（包含）以上支持 4.0（包含）以上支持 3.5（包含）以上支持 4.0（包含）以上支持 11.5（包含）以上支持

  • HTML Web Storage对象

    HTML Web Storage提供了两个用于在客户端上存储数据的对象：

    • window.localStorage - 存储没有过期日期的数据
    • window.sessionStorage - 存储一个会话的数据（关闭浏览器选项卡时数据丢失）

    在使用Web存储之前，请检查对localStorage和sessionStorage的浏览器支持：

    if (typeof(Storage) !== "undefined") {
                                // 编写localStorage/sessionStorage的代码。
                                } else {
                                    // 对不起不支持 Web Storage support。
                                }

  • localStorage对象

    localStorage对象存储没有过期日期的数据。当浏览器关闭时，数据不会被删除，并且将在第二天，一周或一年中可用。

    示例：

    // 存储值
                                        localStorage.setItem("username", "张三");
                                        //  读取值 显示在id为result的HTML元素中
                                        document.getElementById("result").innerHTML = localStorage.getItem("username");
    尝试一下

    示例说明：

    使用username =“张三”创建localStorage键值对
    查找“username”的值并将其插入到id =“result”的元素中

    上面的例子也可以这样写：

    // 存储值
                                localStorage.username = "张三";
                                // 查找值
                                document.getElementById("result").innerHTML = localStorage.username;

    删除localStorage的“username”项的语法如下：

    localStorage.removeItem("lastname");
    注意：键值对始终存储为字符串。请记住在需要时将它们转换为其他格式！以下示例计算用户单击按钮的次数。在此代码中，值字符串将转换为一个数字，以便能够增加计数器： 
    if (localStorage.clickcount) {
                                            localStorage.clickcount = Number(localStorage.clickcount) + 1;
                                        } else {
                                            localStorage.clickcount = 1;
                                        }
                                        document.getElementById("result").innerHTML = "您已经点击这个按钮 " +
                                        localStorage.clickcount + " 次。";
    尝试一下

  • sessionStorage对象

    sessionStorage对象跟localStorage对象的功能一样，但 它仅存储一个session数据。当用户关闭特定浏览器选项卡时，将删除数据。以下示例计算用户在当前会话中单击按钮的次数：

    if (sessionStorage.clickcount) {
                                            sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
                                        } else {
                                            sessionStorage.clickcount = 1;
                                        }
                                        document.getElementById("result").innerHTML = "您已经在会话中点击这个按钮 " +
                                        sessionStorage.clickcount + "次";
    尝试一下
上一节:
下一节: