浏览器本地存储 sessionStorage和localStorage

最新推荐文章于 2024-09-05 15:49:46 发布

ALKEN ABBY

最新推荐文章于 2024-09-05 15:49:46 发布

阅读量788

点赞数

分类专栏：开发中的实用方法和函数浏览器使用文章标签： html5 javascript html

本文链接：https://blog.youkuaiyun.com/qq_45803050/article/details/120239490

版权

开发中的实用方法和函数同时被 2 个专栏收录

55 篇文章

订阅专栏

浏览器使用

1 篇文章

订阅专栏

本文介绍了localStorage和sessionStorage的基本API操作，包括设置、读取、删除和清空数据，以及它们在浏览器缓存中的不同行为。重点讲解了如何保存和读取对象，以及如何在控制台查看本地缓存。同时，对比了两者的生命周期特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一. sessionStorage和localStorage的Api是一样的，都是四种

// 保存一个数据
setItem(key,value)
// 读取一个数据
getItem(key)
// 删除一个数据
removeItem(key)
// 清空所有数据
clear()

// 注意：4个方法里面的key和value都是字符串类型的

二. 下面是具体例子：
localStorage使用：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<h2>localStorage</h2>
<button onclick="saveData()">点我保存一个数据</button>
<button onclick="readData()">点我读取一个数据</button>
<button onclick="deleteData()">点我删除一个数据</button>
<button onclick="deleteAllData()">点我清空所有数据</button>

<script>
  let p={name:'Bob',age:19};

  function saveData() {
    //注意：setItem里面的key和value都是字符串类型的，如果传入的不是字符串，
    // 就会调用 toString 方法 把它变为字符串
    window.localStorage.setItem('msg','hello');
    localStorage.setItem('msg2',666);

  //  保存对象的方式:注意： toString , JSON.stringify 和 JSON.parse 的区别
    localStorage.setItem('person',JSON.stringify(p));

  }

  function readData() {
    console.log(localStorage.getItem('msg2'));

    const res=localStorage.getItem('person');
    console.log(JSON.parse(res));

    const res1=localStorage.getItem('p');
    console.log(JSON.parse(res1));
  }

  function deleteData() {
    localStorage.removeItem('msg2');
  }

  function deleteAllData() {
    localStorage.clear();
  }

</script>
</body>
</html>

sessionStorage使用：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<h2>sessionStorage</h2>
<button onclick="saveData()">点我保存一个数据</button>
<button onclick="readData()">点我读取一个数据</button>
<button onclick="deleteData()">点我删除一个数据</button>
<button onclick="deleteAllData()">点我清空所有数据</button>

<script>
  let p = {name: 'Bob', age: 19};

  function saveData() {
    //注意：setItem里面的key和value都是字符串类型的，如果传入的不是字符串，
    // 就会调用 toString 方法 把它变为字符串
    window.sessionStorage.setItem('msg', 'hello');
    sessionStorage.setItem('msg2', 666);

    //  保存对象的方式:注意： toString , JSON.stringify 和 JSON.parse 的区别
    sessionStorage.setItem('person', JSON.stringify(p));

  }

  function readData() {
    console.log(sessionStorage.getItem('msg2'));

    const res = sessionStorage.getItem('person');
    console.log(JSON.parse(res));

    const res1 = sessionStorage.getItem('p');
    console.log(JSON.parse(res1)); // 没有key的就输出null
  }

  function deleteData() {
    sessionStorage.removeItem('msg2');
  }

  function deleteAllData() {
    sessionStorage.clear();
  }

</script>
</body>
</html>