html5API之web存储

最新推荐文章于 2022-04-06 08:29:32 发布

沐梓沐囡

最新推荐文章于 2022-04-06 08:29:32 发布

阅读量638

点赞数 1

分类专栏： html5 js 文章标签： html5API WEB存储

本文链接：https://blog.csdn.net/yy_9_aa/article/details/78189117

版权

js 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

html5

2 篇文章 0 订阅

订阅专栏

网络的迅猛发展，基于网页的应用越来越普遍越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统以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.οnclick=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.οnlοad=function(){
        username.value= window.localStorage.getItem("username");
        pwd.value=window.localStorage.getItem("pwd");
    }
</script>
</body>
</html>

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

window.localStorage的好处。

沐梓沐囡

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5API之web存储

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

扫一扫

专栏目录