欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

HTML5深入学习之数据存储

程序员文章站 2022-04-11 07:53:38
概述 本来，数据存储都是由 cookie 完成的，但是 cookie 不适合大量数据的存储，cookie 速度慢且效率低。 现在，HMLT5提供了两种在客户端存储数据的办法： 两者之间的实测对比 localStorage 首先我们先运行这段代码： 然后浏览器则弹出显示： 接着，我们注释掉localS ......

概述

　　本来，数据存储都是由 cookie 完成的，但是 cookie 不适合大量数据的存储，cookie 速度慢且效率低。

　　现在，hmlt5提供了两种在客户端存储数据的办法：

  1. localstorage(没有时间限制的数据存储，即当我们设置了之后浏览器关闭后再去访问它依然存在)
  2. sessionstorage(针对一个session的数据存储，当我们设置了之后浏览器关闭后再去访问他就消失了)

两者之间的实测对比

　　localstorage

　　　　　　首先我们先运行这段代码：　　　　

localstorage.setitem('name', 'lisi');
alert(localstorage.getitem('name'));

 　　　　　　然后浏览器则弹出显示：

HTML5深入学习之数据存储

 

　　　　　　接着，我们注释掉localstorage.setitem('name', 'lisi');，关闭浏览器重新访问，依然可以显示：

HTML5深入学习之数据存储

　　

 　　sessionstorage

　　　　　　步骤大概和设置 localstorage 一样，但是浏览器关闭后再次访问已不见 sessionstorage

　　　　　　浏览器关闭前：

　　　　　　HTML5深入学习之数据存储

　　　　　　浏览器关闭后再次访问：

　　　　　　HTML5深入学习之数据存储

 

实例(记住用户名与密码)-----使用 localstorage

常用api:

  • setitem() => 设置要存储得数据
  • getitem() => 获取存储的数据
  • removeitem() => 移除存储的数据

代码：

<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8" />
    <title>独秀不爱秀</title>
</head>
<body>
    用户名: <input type="text" name="username" id="username"><br>
    密码：  <input type="password" name="pwd" id="pwd"><br>
    记住用户名与密码:  <input type="checkbox" name="save" id="save">
    <script type="text/javascript">
        var username = document.getelementsbyname('username')[0];
        var pwd = document.getelementsbyname('pwd')[0];
        var save = document.getelementsbyname('save')[0];

        if (localstorage.getitem('username') && localstorage.getitem('pwd')) {
            // 将获取到的值添加到 html
            username.value = localstorage.getitem('username');
            pwd.value = localstorage.getitem('pwd');
        }

        save.addeventlistener('click', function () {
            if (save.checked) {
                localstorage.setitem('username', username.value);
                localstorage.setitem('pwd', pwd.value);
            } else {
                localstorage.removeitem('username');
                localstorage.removeitem('pwd');
            }
        });
    </script>
</body>
</html>

 

上一篇： C#实现Dev Grid拖拽移动行的方法

下一篇： HTML连载17-id选择器&类选择器

推荐阅读