HTML5--web存储

最新推荐文章于 2024-09-10 17:45:18 发布

diligentkong

最新推荐文章于 2024-09-10 17:45:18 发布

阅读量417

点赞数

分类专栏： html5 文章标签： html5 web存储

本文链接：https://blog.csdn.net/diligentkong/article/details/61625421

版权

html5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统方式我们以document.cookie来进行存储的，但是由于其存储大小只有4k左右，存储数据量小，并且解析也相当的复杂，给开发带来诸多不便，HTML5规范则提出解决方案。
Storage 存储：window.sessionStorage和window.localStorage
(向本地保存数据,有可能在浏览器内存里面，有可能在硬盘上面.)
数据存储都是以键值对的形式进行存储的。

sessionStorage

会话存储，容量5M。在同一个窗口下的数据可以共享，但当用户关闭浏览器窗口后，数据会被删除。
sessionStorage的用法：

window.sessionStorage.setItem（key，value）设置储存内容。再次给同一个key赋值，会覆盖之前的数据
window.sessionStorage.getItem（key）获取存储数据
window.sessionStorage.removeItem（key）删除key
window.sessionStorage.clear（）清除所有数据

localStorage

本地存储，容量20M。特点：永久生效，除非手动删除,清理垃圾，存储在硬盘上。可以多窗口共享，设置、读取方便；只能存储字符串，可以将对象json.stringify（），编码后储存；可能存储在浏览器内存和硬盘上
loaclStorage方法：
a) window.关闭窗口数据销毁
b) window.loaclStorage数据存储在硬盘上，永久存储
1. window.localStorage.setItem（key，walue）设置储存内容
i. 再次给同一个key赋值，会覆盖之前的数据。
2. window. localStorage.getItem（key）获取存储数据
3. window. localStorage.removeItem（key）删除key
4. window. localStorage.clear（）清除所有数据
3. 打开页自动获取数据：window.onload = function（）｛获取数据｝

案例：记住用户的密码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <label for="">
            用户名：<input type="text" class="userName" />
        </label>
        <br /><br />
        <label for="">
            密  码：<input type="password" class="pwd" />
        </label>
        <br /><br />
        <label for="">
            <input type="checkbox" class="cb" />
            记住密码
        </label>
        <br /><br />
        <button class="btn">登录</button>
    </body>
</html>
<script>
    var userName = document.querySelector('.userName'),
        pwd = document.querySelector('.pwd'),
        cb = document.querySelector('.cb');
        btn = document.querySelector('.btn');

     //  登录时,判断是否选择记住密码
        btn.onclick = function(){
             // 如果记住密码勾选上，表示要存储用户信息
            if (cb.checked) {
                window.localStorage.setItem('userName',userName.value);
                window.localStorage.setItem('pwd',pwd.value);
            } else{
                // 否则清除用户信息
                window.localStorage.removeItem('userName');
                window.localStorage.removeItem('pwd');
            }
        }
        // 当页面加载的时候，自动获取用户名、密码 填充到表单
        userName.value = window.localStorage.getItem('userName');
        pwd.value = window.localStorage.getItem('pwd');
        cb.checked = true;
</script>