一、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>

JavaScript知识库最新文章

ES6的相关知识点

react 函数式组件 & react其他一些总结

Vue基础超详细

前端JS也可以连点成线（Vue中运用 AntVG6）

Vue事件处理的基本使用

Vue后台项目的记录（一）

前后端分离vue跨域，devServer配置proxy代理

TypeScript

初识vuex

vue项目安装包指令收集

加:2022-02-19 01:03:52 更:2022-02-19 01:05:29

360图书馆购物三丰科技阅读网日历万年历 2025年10日历

-2025/10/25 3:19:40-

图片自动播放器
↓图片自动播放器↓

TxT小说阅读器
↓语音阅读,小说下载,古典文学↓

一键清除垃圾
↓轻轻一点,清除系统垃圾↓

图片批量下载器
↓批量下载图片,美女图库↓

网站联系: qq:121756557 email:121756557@qq.com IT数码