JS本地储存：localStorage和sessionStorage

admin · 2022-1-17 14:36:49

localStorage和sessionStorage是Web提供的两种本地存储方式。
相比较cookie而言，localStorage和sessionStorage的存储大小很大，localStorage能够长期保存，sessionStorage在会话期间保存。
localStorage和sessionStorage都是window对象提供的全局属性，用途都是在浏览器中存储key/value对的数据。
从使用的角度来看，两者的唯一区别在于时效性。
sessionStorage在关闭窗口或标签页之后将会删除这些数据。
而localStorage则没有这样的特性，今天、下周、明年、一百年，甚至理论上的成千上万年后都能用，除非你手动去删除。
如果你想在浏览器窗口关闭后还保留数据，请使用localStorage。
如果你是想用于临时保存同一窗口（或标签页）的数据，请使用sessionStorage。

使用sessionStorage案例：
<body>
<input type="text">
<button class="set">存储数据</button>
<button class="get">获取数据</button>
<button class="remove">删除数据</button>
<button class="del">清空所有数据</button>
<script>
      console.log(localStorage.getItem('username'));

      var ipt = document.querySelector('input');
      var set = document.querySelector('.set');
      var get = document.querySelector('.get');
      var remove = document.querySelector('.remove');
      var del = document.querySelector('.del');
      set.addEventListener('click', function() {
         // 当我们点击了之后，就可以把表单里面的值存储起来
         var val = ipt.value;
         sessionStorage.setItem('uname', val);
         sessionStorage.setItem('pwd', val);
      });
      get.addEventListener('click', function() {
         // 当我们点击了之后，就可以把表单里面的值获取过来
         console.log(sessionStorage.getItem('uname'));
      });
      remove.addEventListener('click', function() {
         //
         sessionStorage.removeItem('uname');
      });
      del.addEventListener('click', function() {
         // 当我们点击了之后，清除所有的
         sessionStorage.clear();
      });
</script>
</body>

使用localStorage案例：
<body>
<input type="text">
<button class="set">存储数据</button>
<button class="get">获取数据</button>
<button class="remove">删除数据</button>
<button class="del">清空所有数据</button>
<script>
      var ipt = document.querySelector('input');
      var set = document.querySelector('.set');
      var get = document.querySelector('.get');
      var remove = document.querySelector('.remove');
      var del = document.querySelector('.del');
      set.addEventListener('click', function() {
         var val = ipt.value;
         localStorage.setItem('username', val);
      })
      get.addEventListener('click', function() {
         console.log(localStorage.getItem('username'));
      })
      remove.addEventListener('click', function() {
         localStorage.removeItem('username');
      })
      del.addEventListener('click', function() {
         localStorage.clear();
      })
</script>
</body>

		自动登录	找回密码
密码			立即注册

JS本地储存：localStorage和sessionStorage

0 个回复

快速回复

admin

楼主热帖

相关帖子

标签云

艾Q网