localStorage和sessionStorage的使用

localStorage

一共有4个API：

localStorage.setItem()
localStorage.getItem()
localStorage.removeItem()
localStorage.clear()

DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>localStoragetitle>
head>

<body>
  <h1>localStorageh1>
  <button onclick="savaData()">点我存数据button>
  <button onclick="readData()">点我读取数据button>
  <button onclick="removeData()">点我删除数据button>
  <button onclick="removeAllData()">点我删除全部数据button>
body>
<script>
  let p = { name: 'feliks', age: 22, sex: '男' };
  //存数据
  function savaData() {
    localStorage.setItem('user1', JSON.stringify(p))
    localStorage.setItem('msg', 'hahaha,amazing')
    localStorage.setItem('hobby', 'sing-dance-rap-basketball')
  }
  //读数据
  function readData() {
    let p1 = localStorage.getItem('user1');
    console.log(JSON.parse(p1));//将json格式字符串转换成json对象
    console.log(localStorage.getItem('msg'));
    console.log(localStorage.getItem('hobby'));
  }
  //删一条
  function removeData() {
    localStorage.removeItem('msg')
  }
  //删完
  function removeAllData() {
    localStorage.clear();
  }
script>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

sessionStorage

sessionStorage和localStorage用法一样
区别：

sessionStorage关闭浏览器即消失
localStorage需要用户手动清除

相关阅读:
Vue bus事件总线的原理与使用
【炫丽】从0开始做一个WPF+Blazor对话小程序
oauth2.0鉴权，登录访问 “/oauth/token”，请求头Authorization（basicToken）如何取值？？？
Kafka集群搭建
五天搞定Mysql基础知识-Day05
mysql5.7.44误删除数据后，使用binlog日志恢复
一篇了解全MVCC
如何排查CPU飙升的问题所在
三个线程顺序打印ABC?我有十二种做法，彻底掌握多线程同步通信机制
pyqt5 学习笔记七（QStackedLayout）抽屉布局器

原文地址：https://blog.csdn.net/qq_47770336/article/details/126150053