html5API之web存储

来源：互联网发布：iphone4s支持4g网络吗编辑：程序博客网时间：2024/06/05 18:29

网络的迅猛发展，基于网页的应用越来越普遍越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，给开发人员带来诸多不便，随着救世主html5的诞生为其提供了标准的解决方案。

基于html5的Storage 存储即 window.sessionStorage window.localStorage

Storage特性：

1、设置、读取方便

2、容量较大，sessionStorage约5M、localStorage约20M

3、只能存储字符串，可以将对象JSON.stringify() 编码后存储

那么window.sessionStorage 和 window.localStorage的区别有哪些呢？

window.sessionStorage：5M 存储在内存上

1、生命周期=打开浏览器窗口到关闭浏览器窗口。

2、在同一个窗口下数据可以共享。

 window.localStorage：20M 永久生效 ，除非手动删除 否则一直留在硬盘上

1、永久生效，除非手动删除

2、可以多窗口共享。

它们的常用方法总结：

setItem(key,value) 设置存储内容

getItem(key) 读取存储内容

removeItem(key) 删除键值为key的存储内容

clear() 清空所有存储内容

代码示例：

<!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="">       密&nbsp&nbsp&nbsp码：<input  type="password"  class="pwd">   </label><br/><br/>   <label  for="">       记住密码：<input  type="checkbox"  class="ckb">   </label><br/><br/>      <button       class="btn">登录</button><script  type="text/javascript">            var username=document.querySelector(".username");            var pwd=document.querySelector(".pwd");            var ckb=document.querySelector(".ckb");            var btn=document.querySelector(".btn");      btn.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>

效果截图：下次加载页面时页面仍会记录用户信息这就是

window.localStorage的好处。

阅读全文

1 0