sessionStorage与localStorage

原创已于 2022-03-02 17:35:04 修改 · 264 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

于 2022-02-17 23:03:37 首次发布

javascript 专栏收录该内容

21 篇文章

订阅专栏

本文详细介绍了浏览器的sessionStorage和localStorage两种本地存储方式，包括它们的生命周期、使用范围、操作方法。sessionStorage适用于同一页面的数据存储，生命周期与浏览器窗口关闭相关，而localStorage则可长期保存数据，跨页面使用。通过示例代码展示了如何在网页中实现记住用户名的功能，同时提到了JSON对象在数据转换中的作用。

一、window.sessionStorage

1. 生命周期：关闭浏览器窗口

2. 使用范围：同一个页面下都可以使用

3. 存储形式：键值对

4. 操作：

（1）存储数据：sessionStorage.setItem(key, value)

（2）获取数据：sessionStorage.getItem(key)

（3）删除数据：sessionStorage.removeItem(key)

（4）删除所有数据：sessionStorage.clear()

二、window.localStorage

1. 生命周期：forever，除非手动删除

2. 使用范围：同一浏览器下的多页面使用

3. 存储形式：键值对

4. 操作：

（1）存储数据：localStorage.setItem(key, value)

（2）获取数据：localStorage.getItem(key)

（3）删除数据：localStorage.removeItem(key)

（4）删除所有数据：localStorage.clear()

三、Demo

<body>
  <input type="text" id="username"><input type="checkbox" name="" id="remember">记住用户名
  <script>
     var input = document.querySelector('input');
     var remember = document.querySelector('#remember');
     if(localStorage.getItem('username')) {
       input.value = localStorage.getItem('username');
       remember.checked = true;
     }
     remember.addEventListener('change', function() {
       var uname = input.value;
       if(this.checked) {
         localStorage.setItem('username',uname);
       }else {
        localStorage.removeItem('username');
       }
     })
  </script>
</body>