JavaScript - webAPI - 本地存储

最新推荐文章于 2022-12-20 11:45:54 发布

Henry_ww

最新推荐文章于 2022-12-20 11:45:54 发布

阅读量218

点赞数

分类专栏： JavaScript 文章标签： session js javascript

本文链接：https://blog.csdn.net/Henry_ID/article/details/119597661

版权

JavaScript 专栏收录该内容

47 篇文章 2 订阅

订阅专栏

本文详细介绍了浏览器的两种会话存储机制——sessionStorage和localStorage的区别，包括存储位置、生命周期、数据类型及操作方法。重点讲解了它们的使用场景和注意事项，帮助理解本地存储的持久与临时特性。

摘要由CSDN通过智能技术生成

1.1-会话存储 - sessionStorage

1.sessionStorage相当于短命版的localStorage，其他用法完全一致

2.两者区别：HP值不同

localStorage：永久存储（存在硬盘，HP值无限）

sessionStorage：临时存储（存在内存，HP值一条命，只要浏览器关闭就没有了）

<!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>本地存储 - 会话存储</title>
    </head>
    <body></body>
    <script>
        // js  通过  sessionStorage对象来操作浏览器的 Session  Storage
        console.log(sessionStorage);

        // 1.setItem('名字','值') : 名字和值都是字符串,值如果是数字可以不用引号
        sessionStorage.setItem("name", "value");
        sessionStorage.setItem("名字", "值");

        // 2.getItem('名字') : 获取
        console.log(sessionStorage.getItem("名字"));

        // 如果名字不存在呢?
        console.log(sessionStorage.getItem("undefined")); //  null

        // 3.removeItem('名字') : 删除
        sessionStorage.removeItem("名字");

        // 4.clear() : 清空
        sessionStorage.clear();

        // 💥 扩展:本地存储,只能存字符串
        let obj = {
            name: "安琪拉",
            age: "18",
            gender: "女",
        };
        sessionStorage.setItem("obj", obj); //  [object Object] 变成自己的字符串,导致数据丢失(永远找不回来)
        // 为了保证数据的安全:需要将对象变成有规则的字符串:JSON字符串
        // JSON将对象变成字符串:JSON.stringify(对象)
        sessionStorage.setItem("obj", JSON.stringify(obj));
    </script>
</html>

在这里插入图片描述

1.2 - 本地存储 - localStorage

1.localStorage:本地存储

将数据存储到浏览器

2.语法

存： localStorage.setItem(‘属性名’,‘属性值’)

取： localStorage.getItem(‘属性名’)

删： localStorage.removeItem(‘属性名’)

清空： localStorage.clear()

3.注意点

a.存储的数据只能是字符串类型。如果是其他数据类型则会自动调用toString()方法转成字符串

b.永久存储。除非自己删，否则一直存在于浏览器

在这里插入图片描述

<!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>本地存储 - 永久存储</title>
    </head>
    <body></body>
    <script>
        // localStorage: 永久存储

        // 跟sessionStorage的用法: 一模一样

        // 区别: 可以永久存储, 关闭页面浏览器都有效: 可以跨页面访问
        localStorage.setItem("job", "保安");

        // 总结
        // 永久存储可以跨页面访问(共享数据), 可以无限存储
    </script>
</html>

Henry_ww

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript - webAPI - 本地存储

1.1-会话存储 - sessionStorage1.sessionStorage相当于短命版的localStorage，其他用法完全一致2.两者区别：HP值不同 localStorage：永久存储（存在硬盘，HP值无限） sessionStorage：临时存储（存在内存，HP值一条命，只要浏览器关闭就没有了）<!DOCTYPE html><html lang="en"> <head>
复制链接

扫一扫