随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统方式我们以document.cookie来进行存储的，但是由于其存储大小只有4k左右，存储数据量小，并且解析也相当的复杂，给开发带来诸多不便，HTML5规范则提出解决方案。 Storage 存储 ：window.sessionStorage和window.localStorage (向本地保存数据,有可能在浏览器内存里面，有可能在硬盘上面.) 数据存储都是以键值对的形式进行存储的。
会话存储，容量5M。在同一个窗口下的数据可以共享，但当用户关闭浏览器窗口后，数据会被删除。 sessionStorage的用法：
window.sessionStorage.setItem（key，value）设置储存内容。再次给同一个key赋值，会覆盖之前的数据window.sessionStorage.getItem（key）获取存储数据window.sessionStorage.removeItem（key）删除keywindow.sessionStorage.clear（）清除所有数据本地存储，容量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>