• 浏览器本地存储webStroage

    文章目录

    localStorage本地存储

    localStroage的数据需要手动删除，即使关闭浏览器数据也不会消失，你什么时候删，数据什么时候消失
    手动删除：如清空缓存

    localStorage的4个操作：存储数据、获取数据、删除数据、清空数据

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


    <script type='text/javascript'>
    function saveData (){
        // localStorage中存储的键和值都是字符串类型，
        // 即使传入的是number类型，也会转为字符串类型,默认调用toString方法
        // 所以如果想要传递对象可以调用JSON.stringify方法，将对象转换为json字符串（json字符串可以显示对象内容，但本质也是一个字符串）

        const p ={id:"123",name:'yang',age:18}
        localStorage.setItem('msg','hello')
        localStorage.setItem('hello',123)
        localStorage.setItem('person',JSON.stringify(p))
    }
    function readData (){
        console.log(localStorage.getItem('msg'))
        console.log(localStorage.getItem('hello'))
        // JSON.parse(null) 的结果依然是 null
        console.log(JSON.parse(localStorage.getItem('person')))        
    }
    function deleteData (){
        localStorage.removeItem('msg')

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

    script>
body>
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

    localStorage数据查看：
    在这里插入图片描述

    sessionStorage

    sessionStorage中的数据浏览器一关闭就没有了
    sessionStorage的4个操作：存储数据、获取数据、删除数据、清空数据（和localStroage一样）

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


    <script type='text/javascript'>
    function saveData (){
        // sessionStorage中存储的键和值都是字符串类型，
        // 即使传入的是number类型，也会转为字符串类型,默认调用toString方法
        // 所以如果想要传递对象可以调用JSON.stringify方法，将对象转换为json字符串（json字符串可以显示对象内容，但本质也是一个字符串）

        const p ={id:"123",name:'yang',age:18}
        sessionStorage.setItem('msg','hello')
        sessionStorage.setItem('hello',123)
        sessionStorage.setItem('person',JSON.stringify(p))
    }
    function readData (){
        console.log(sessionStorage.getItem('msg'))
        console.log(sessionStorage.getItem('hello'))
        // JSON.parse(null) 的结果依然是 null
        console.log(JSON.parse(sessionStorage.getItem('person')))        
    }
    function deleteData (){
        sessionStorage.removeItem('msg')

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

    script>
body>
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

    查看数据：
    在这里插入图片描述

    webstroage

    webstroage时localStorage和sessionStorage的统称。

    • 存储内容大小一般支持5MB左右(不同浏览器可能还不一样)
    • 浏览器端通过Window.sessionStorage和Window.localStorage属性来实现本地存储机制。
    • SessionStorage存储的内容会随着浏览器窗口关闭而消失。
    • LocalStorage存储的内容，需要手动清除才会消失。

    两个小点

    • xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getltem的返回值是null
    • JSON. parse(null)的结果依然是null。
  • 相关阅读:
    FPGA语法相关知识合集
    【力扣周赛】第 357 场周赛（⭐反悔贪心）
    2022-6-22 我的日程安排表III，最大频率栈，将数据流变为多个不相交区间
    【VTK】关于VTK图像的系列功能
    高校社团管理系统jsp和javabean开发
    sem_post
    kubernetes二进制方法部署v1.23版本k8s详细安装步骤
    软路由koolshare故障处理集锦
    记录将excel表无变形的弄进word里面来
    response的Content-Length设置错误，导致springboot文件下载，代码已经return，postman一直等待到超时
  • 原文地址：https://blog.csdn.net/mantou_riji/article/details/125888470