当前位置： 移动技术网 > IT编程>网页制作>Html5 > HTML5深入学习之数据存储

HTML5深入学习之数据存储

2019年06月30日  | 移动技术网IT编程  | 我要评论

概述

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

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

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

两者之间的实测对比

　　localstorage

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

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

 　　　　　　然后浏览器则弹出显示：

 

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

　　

 　　sessionstorage

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

　　　　　　浏览器关闭前：

　　　　　　

　　　　　　浏览器关闭后再次访问：

　　　　　　

 

实例(记住用户名与密码)-----使用 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>

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网