web当中的WebStorage详解

1.webstorage详解：

存储内容大小一般支持5MB左右（不同浏览器可能还不一样）

浏览器端通过Window.sessionStorage和Window.localStorage属性来实现本地存储机制

相关API：

xxxStorage.setItem('key', 'value')：该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值
xxxStorage.getItem('key')：该方法接受一个键名作为参数，返回键名对应的值
xxxStorage.removeItem('key')：该方法接受一个键名作为参数，并把该键名从存储中删除
xxxStorage.clear()：该方法会清空存储中的所有数据
备注：

SessionStorage存储的内容会随着浏览器窗口关闭而消失
LocalStorage存储的内容，需要手动清除才会消失
xxxStorage.getItem(xxx)如果 xxx 对应的 value 获取不到，那么getItem()的返回值是null
JSON.parse(null)的结果依然是null

2.代码示例

一般看代码就懂得一切了，在这里主要是创建一些本地存储的函数，然后点击的时候


<!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>localStorage</title>
</head>
<body>
    <h2>localStorage</h2>
    <button onclick="saveDate()">点我保存数据</button><br/>
    <button onclick="readDate()">点我读数据</button><br/>
    <button onclick="deleteDate()">点我删除数据</button><br/>
    <button onclick="deleteAllDate()">点我清空数据</button><br/>
 
    <script>
        let person = {name:"JOJO",age:20}
 
        function saveDate(){
            localStorage.setItem('msg','localStorage')
            localStorage.setItem('person',JSON.stringify(person))
        }
        function readDate(){
            console.log(localStorage.getItem('msg'))
            const person = localStorage.getItem('person')
            console.log(JSON.parse(person))
        }
        function deleteDate(){
            localStorage.removeItem('msg')
            localStorage.removeItem('person')
        }
        function deleteAllDate(){
            localStorage.clear()
        }
    </script>
</body>
</html>

相关阅读:
IP地址简介
解决单文件组件里的跨域请求数据问题（使用vue单文件组件请求数据必会遇到的问题！！！）
Java进阶路线目录索引(持续更新中)
Markem imaje马肯依玛士喷码机维修9450E打码机维修
在【windows server 2012】下安装MySQL5.7
Java练习 day2(LeetCode简单题15道）
java计算机毕业设计中美医院病历管理系统源程序+mysql+系统+lw文档+远程调试
猿创征文｜【Vue3】插槽（Slot）基础使用
构建全面预算体系，加强企业风险管理
Windows API hooking.简单的C++例子

原文地址：https://blog.csdn.net/m0_68997646/article/details/127711802