基本概念
1、传统方式我们以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，给开发带来诸多不便
2、h5存储设置、读取方便，而且容量较大，sessionStorage约5M、localStorage约20M
3、h5存储只能存储字符串，可以将对象JSON.stringify() 编码后存储
window.sessionStorage
1、在同一个窗口下数据可以共享
2、生命周期为关闭浏览器窗口（内存即毁灭）
window.sessionStorage.setItem("userName", "wq");//设置值window.sessionStorage.setItem("userName", "qw");//更新值window.sessionStorage.setItem("age", 18);//设置值window.sessionStorage.getItem("userName");//获取值window.sessionStorage.removeItem("userName");//移除值window.sessionStorage.clear();//清空所有值window.localStorage
1、可以多窗口共享
2、永久生效，除非手动删除（存储在硬盘上）
window.localStorage.setItem("userName", "kk");//设置值window.localStorage.setItem("userName", "uu");//更新值window.localStorage.getItem("userName");//获取值window.localStorage.removeItem("userName");//移除值window.localStorage.clear();//清空值其他
WebSQL、IndexDB已经被w3c 放弃了..生命周期差异，存储空间差异
<!DOCTYPE html><html><head lang="en"> ???<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="ckb"/> ???????记住密码 ???</label> ???<br/><br/> ???<button>登录</button><script> ???var userName=document.querySelector(‘.userName‘); ???var pwd=document.querySelector(‘.pwd‘); ???var sub=document.querySelector(‘button‘); ???var ckb=document.querySelector(‘.ckb‘); ???sub.onclick=function(){ ??//如果记住密码 被选中存储，用户信息 ???????if(ckb.checked){ ???????????window.localStorage.setItem(‘userName‘,userName.value); ???????????window.localStorage.setItem(‘pwd‘,pwd.value); ???????}else{ ???????????window.localStorage.removeItem(‘userName‘); ???????????window.localStorage.removeItem(‘pwd‘); ???????} ??//否则清除用户信息 ???} ???window.onload=function(){ ???//当页面加载完成后，获取用户名，密码，填充表单 ???????userName.value=window.localStorage.getItem(‘userName‘); ???????pwd.value=window.localStorage.getItem(‘pwd‘); ???}</script></body></html>html5——web存储
原文地址：https://www.cnblogs.com/wuqiuxue/p/8116864.html