(JavaScript) 浏览器本地存储localStorage和sessionStorage

最新推荐文章于 2023-06-03 15:37:10 发布

天赐细莲

最新推荐文章于 2023-06-03 15:37:10 发布

阅读量761

点赞数

分类专栏：前端文章标签： javascript 前端

本文链接：https://blog.csdn.net/CUBE_lotus/article/details/122592618

版权

前端专栏收录该内容

7 篇文章 2 订阅

订阅专栏

文章目录

localStorage
sessionStorage
END

浏览器本地存储是根据键值对的形式来存储的。

一般位于控制台的应用程序 的 存储这里

本文介绍前两种本地存储localStorage和会话存储sessionStorage

localStorage

基本展示框架

<!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>sessionStorage</title>
</head>
<body>
    <h2>sessionStorage在关闭浏览器即会清除</h2>
    <button onclick="saveData()">点我保存一次数据</button> <hr>
    <button onclick="readData()">点我读取一次数据</button> <hr>
    <button onclick="deleteData()">点我删除一次数据</button> <hr>
    <button onclick="deleteAllData()">点我清空数据</button> <hr>
</body>
<script>
    function saveData() {}
    function readData() {}
    function deleteData() {}
    function deleteAllData() {}
</script>
</html>

`setItem` 存储

function saveData() {
    const arr = ["C++", "java", "python", "JavaScript"];
    const obj = {
        name : "张三",
        age : 18
    }
    localStorage.setItem("stringMessage", "字符串数据");
    // 会自动调用toSting方法
    localStorage.setItem("numberMessage", 123.456);
    localStorage.setItem("objectMessage", obj);
    // localStorage.setItem("objectMessage", JSON.stringify(obj));
    localStorage.setItem("arrayMessage", arr);
    // localStorage.setItem("arrayMessage", JSON.stringify(arr));
}

没有调用JSON.stringify()方法

在这里插入图片描述

调用了JSON.stringify()方法

在这里插入图片描述

在存储时会自动调用toSting方法。

因此所有数字类型都会变成字符串

在存储对象类型或者数组的时候，需要当成json数据一样调用JSON.stringify()方法

`getItem` 获取

function readData() {
    console.log(localStorage.getItem("stringMessage"));
    console.log(localStorage.getItem("numberMessage"));     // 字符串型
    console.log(localStorage.getItem("undefineMessage"));   // 输出 null

    // 如果myStringObjet是null 则myObjet也是null
    const myStringObjet = localStorage.getItem("objectMessage");
    console.log(typeof myStringObjet, " : " , myStringObjet);
    const myObjet = JSON.parse(myStringObjet);
    console.log(typeof myObjet, " : " , myObjet);

    const myStringArray = localStorage.getItem("arrayMessage");
    console.log(typeof myStringArray, " : " , myStringArray);
    const myArray = JSON.parse(myStringArray);
    console.log(typeof myArray, " : " , myArray);
}

在这里插入图片描述

如果是获取不存在的数据，得到的是null
注意这里的123.456是字符串(打印的颜色是黑色)

对象或者数组需要使用JSON.parse()转化回来

如果获取到了null则用JSON.parse()转化了还是null

`removeItem` 删除

function deleteData() {
    localStorage.removeItem("stringMessage");
}

`clear` 清空

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

sessionStorage

sessionStorage 和 localStorage 的区别就是

sessionStorage 会根据浏览器的关闭自动清除

localStorage 需要手动清除

直接上代码吧，这份代码和上面的区别就是localStorage 写成sessionStorage

<!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>sessionStorage</title>
</head>
<body>
    <h2>sessionStorage</h2>
    <button onclick="saveData()">点我保存一次数据</button> <hr>
    <button onclick="readData()">点我读取一次数据</button> <hr>
    <button onclick="deleteData()">点我删除一次数据</button> <hr>
    <button onclick="deleteAllData()">点我清空数据</button> <hr>
</body>
<script>
    function saveData() {
        const arr = ["C++", "java", "python", "JavaScript"];
        const obj = {
            name : "张三",
            age : 18
        }
        sessionStorage.setItem("stringMessage", "字符串数据");
        // 会自动调用toSting方法
        sessionStorage.setItem("numberMessage", 123.456);
        // sessionStorage.setItem("objectMessage", obj);
        sessionStorage.setItem("objectMessage", JSON.stringify(obj));
        // sessionStorage.setItem("arrayMessage", arr);
        sessionStorage.setItem("arrayMessage", JSON.stringify(arr));
    }

    function readData() {
        console.log(sessionStorage.getItem("stringMessage"));
        console.log(sessionStorage.getItem("numberMessage"));     // 字符串型
        console.log(sessionStorage.getItem("undefineMessage"));   // 输出 null

        // 如果myStringObjet是null 则myObjet也是null
        const myStringObjet = sessionStorage.getItem("objectMessage");
        console.log(typeof myStringObjet, " : " , myStringObjet);
        const myObjet = JSON.parse(myStringObjet);
        console.log(typeof myObjet, " : " , myObjet);

        const myStringArray = sessionStorage.getItem("arrayMessage");
        console.log(typeof myStringArray, " : " , myStringArray);
        const myArray = JSON.parse(myStringArray);
        console.log(typeof myArray, " : " , myArray);
    }

    function deleteData() {
        sessionStorage.removeItem("stringMessage");
    }

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

</script>
</html>

参考资料：尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通 078_浏览器本地存储

END

天赐细莲

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
(JavaScript) 浏览器本地存储localStorage和sessionStorage

文章目录localStorage`setItem` 存储`getItem` 获取`removeItem` 删除`clear` 清空sessionStorageEND浏览器本地存储是根据键值对的形式来存储的。一般位于控制台的应用程序的存储这里本文介绍前两种本地存储localStorage和会话存储sessionStoragelocalStorage基本展示框架<!DOCTYPE html><html lang="en"><head> &lt
复制链接

扫一扫