• 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.代码示例

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

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>localStorage</title>
    8. </head>
    9. <body>
    10.     <h2>localStorage</h2>
    11.     <button onclick="saveDate()">点我保存数据</button><br/>
    12.     <button onclick="readDate()">点我读数据</button><br/>
    13.     <button onclick="deleteDate()">点我删除数据</button><br/>
    14.     <button onclick="deleteAllDate()">点我清空数据</button><br/>
    15.  
    16.     <script>
    17.         let person = {name:"JOJO",age:20}
    18.  
    19.         function saveDate(){
    20.             localStorage.setItem('msg','localStorage')
    21.             localStorage.setItem('person',JSON.stringify(person))
    22.         }
    23.         function readDate(){
    24.             console.log(localStorage.getItem('msg'))
    25.             const person = localStorage.getItem('person')
    26.             console.log(JSON.parse(person))
    27.         }
    28.         function deleteDate(){
    29.             localStorage.removeItem('msg')
    30.             localStorage.removeItem('person')
    31.         }
    32.         function deleteAllDate(){
    33.             localStorage.clear()
    34.         }
    35.     </script>
    36. </body>
    37. </html>

  • 相关阅读:
    使用 Apache Camel 和 Quarkus 的微服务（四）
    06【Redis事务与分布式锁】
    TypeScript（二）
    【LeetCode 力扣】1.两数之和 Java实现 哈希表
    Servlet API(HttpSerrvlet+HttpServletRequest+HttpServletResponse)
    cmd怎么删除流氓软件？
    Node.js 入门教程 22 将所有 Node.js 依赖包更新到最新版本
    nrf52832 ADC的配置
    LabVIEW性能和内存管理 1
    k8s的Helm
  • 原文地址：https://blog.csdn.net/m0_68997646/article/details/127711802