HTML5--web存储

来源：互联网发布：08奥运会韦德数据编辑：程序博客网时间：2024/05/18 01:06

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统方式我们以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>

0 0