前端小白的学习之路（数据存储）

2024-03-20 09:46:04
开发
45

提示：浏览器缓存的方式：cookie，本地存储(localStorage)和会话存储(sessionStorage)

tip:如何在浏览器查看缓存的数据

一、cookie

1.概念

在前端开发中，"cookie"通常指的是浏览器中的一种特定类型的文本文件，用于存储网站在用户计算机上的信息。前端开发人员可以使用JavaScript来创建、读取和修改cookie，以实现各种功能，如用户身份验证、记住用户首选项、跟踪用户行为等。

cookie 是一种浏览器缓存数据的机制。（缓存数据的方式）

前提：需要在http协议环境下才可以使用

作用：缓存数据、共享数据

弊端：数据体积小，约4kb (20条)

2.常见方法

创建cookie： 使用document.cookie属性来设置cookie的值，并指定cookie的名称、值、过期时间等信息。

document.cookie = "color=red; expires="+(new Date("2024-2-22"));
document.cookie = "宽度=100px; expires="+(new Date("2024-2-22"));
document.cookie = "height=200px; expires="+(new Date("2024-2-22"));

删除cookie： 通过将cookie的过期时间设置为过去的时间来删除cookie。

document.cookie = "color=; expires="+(new Date("1970-1-1"));
document.cookie = "width=; expires="+(new Date("1970-1-1"));

获取cookie： 通过解析document.cookie属性的值来读取cookie的内容。
```
var str = document.cookie;
console.log("缓存的数据:",str);
```
修改cookie：修改cookie的内容可以通过重新设置相同名称的cookie来实现。
```
 document.cookie = "color=blue; expires="+(new Date("1970-1-1"));
```

二、本地存储

1.概念

本地存储(LocalStorage)。本地存储是浏览器提供的一种存储数据的机制，允许网页在用户的浏览器中存储数据，以便在同一域名下的页面之间进行共享和访问。

使用本地存储，网页可以将数据以键值对的形式存储在用户的浏览器中，并且该数据在用户关闭浏览器后仍然保留。这使得网页可以在用户的不同访问间保持状态、保存用户偏好设置、实现离线功能等。

2.常见方法

存储数据：
```
localStorage.setItem('key', 'value');
```

读取数据：

var value = localStorage.getItem('key');

移除数据：
```
localStorage.removeItem('key');
```
清空所有数据：
```
localStorage.clear();
```

3.使用案例

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基本模板</title>
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
</head>
<body>

   <div class="container">
        <div class="box  mt-5" style="font-size: 30px;">0</div>
        <button class="btn btn-success  mt-2">点击+1</button>
        <button class="btn btn-danger  mt-2">删除存储</button>
   </div>

    <script>

        // 刷新页面，数据状态不复存在
        // var num = 0;
        // var box = document.querySelector(".box");
        // var btn = document.querySelector(".btn");
        // btn.onclick = function(){
        //     num ++;
        //     box.innerText = num;
        // }


        // 本地存储,刷新页面数据不会消失
        var num = 0;
        var box = document.querySelector(".box");
        var btnSuccess = document.querySelector(".btn-success");
        var btnDanger = document.querySelector(".btn-danger");
        btnSuccess.onclick = function(){
            num ++;
            box.innerText = num;
            // 把num的值存储在本地
            localStorage.setItem("NUM",num);
        }

        // 每次初始化
        num = localStorage.getItem("NUM");
        // 判断数据是否存在本地 （不存在为null）
        if(num) {
            // 设置文本
            box.innerText = num;
        }

        // 点击删除存储
        btnDanger.onclick = function(){
            // 删除指定的存储
            localStorage.removeItem("NUM");
            // 重置页面
            num = 0;
            box.innerText = num;
            // 删除所有的存储
            localStorage.clear();
        }
        
        // 本地存储有哪些特点：
        // 1：在同一个环境下，可以缓存数据、共享数据
        // 2：可以永久存储数据
        // 3：缓存数据的体积比cookie大
    </script>

</body>
</html>

注：注意的是，存储在本地存储中的数据以字符串的形式存储，如果需要存储其他类型的数据（如对象或数组），需要先进行序列化和反序列化操作(JSON.stringify()和JSON.parse());

三、会话存储

1.概念

会话存储(Session Storage)与本地存储(Local Storage)类似，也是浏览器提供的一种客户端存储机制，用于在用户会话期间存储数据。会话存储和本地存储之间的主要区别在于数据的生命周期和作用域。

与本地存储不同，会话存储中存储的数据仅在用户会话期间保留。用户会话通常在用户关闭浏览器标签或窗口时结束。因此，会话存储中的数据在用户关闭浏览器后会被删除。

使用会话存储与使用本地存储非常相似，可以使用相同的API来进行操作。

2.常见方法

存储数据：
```
sessionStorage.setItem('key', 'value');
```

读取数据：

var value = sessionStorage.getItem('key');

移除数据：
```
sessionStorage.removeItem('key');
```
清空所有数据：
```
sessionStorage.clear();
```

3.使用案例

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基本模板</title>
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
</head>
<body>

   <div class="container">
        <div class="box  mt-5" style="font-size: 30px;">0</div>
        <button class="btn btn-success  mt-2">点击+1</button>
        <button class="btn btn-danger  mt-2">删除存储</button>
   </div>

    <script>

        // 刷新页面，数据状态不复存在
        // var num = 0;
        // var box = document.querySelector(".box");
        // var btn = document.querySelector(".btn");
        // btn.onclick = function(){
        //     num ++;
        //     box.innerText = num;
        // }



        
        // 会话存储，刷新页面数据不丢失，打开新窗口数据清除
        var num = 0;
        var box = document.querySelector(".box");
        var btnSuccess = document.querySelector(".btn-success");
        var btnDanger = document.querySelector(".btn-danger");
        btnSuccess.onclick = function(){
            num ++;
            box.innerText = num;
            // 把num的值存储在会话
            sessionStorage.setItem("NUM",num);
            
        }

        // 每次初始化
        num = sessionStorage.getItem("NUM");
        // 判断数据是否存在会话 （不存在为null）
        if(num) {
            // 设置文本
            box.innerText = num;
        }

        // 点击删除存储
        btnDanger.onclick = function(){
            // 删除指定的存储
            sessionStorage.removeItem("NUM");
            // 重置页面
            num = 0;
            box.innerText = num;
            // 删除所有的存储
            sessionStorage.clear();
        }
        
        // 会话存储有哪些特点：
        // 1：在同一个环境下，可以缓存数据、共享数据
        // 2：不会可以永久存储数据，随着页面窗口关闭，数据消失
        // 3：缓存数据的体积比cookie大
    </script>

</body>
</html>

四、三者的区别

Cookie、LocalStorage 和 SessionStorage 都是在客户端（即用户的浏览器）上存储数据的方式，它们有一些相同之处，也有一些不同之处。

相同之处：

在客户端存储： Cookie、LocalStorage 和 SessionStorage 都是在用户的浏览器上存储数据，数据保存在用户的本地计算机上，可以在不同的页面间共享。
使用 JavaScript API 进行操作： 它们都使用 JavaScript API 进行读取、写入、修改和删除操作。

不同之处：

生命周期：
- Cookie： 可以设置过期时间，在过期之前一直保留在用户的浏览器中，即使用户关闭浏览器也会保留。
- LocalStorage： 数据永久存储在用户的浏览器中，除非显式删除，否则不会过期。
- SessionStorage： 数据只在当前会话期间有效，会话结束时数据被删除，会话通常在用户关闭浏览器标签或窗口时结束。
存储容量限制：
- Cookie： 每个 cookie 的大小限制为 4KB，每个域名下的 cookie 数量也有限制。
- LocalStorage 和 SessionStorage： 通常支持 5MB 左右的存储空间，但具体容量限制会因浏览器而异。
跨域：
- Cookie： 可以设置跨域访问，但受到浏览器同源策略的限制。
- LocalStorage 和 SessionStorage： 由于同源策略的限制，只能被同一域名下的页面访问。
发送到服务器：
- Cookie： 每次请求都会将相应域名下的 cookie 发送到服务器。
- LocalStorage 和 SessionStorage： 数据只存储在客户端，不会自动发送到服务器，需要手动通过网络请求发送。
安全性：
- Cookie： 可以设置为安全和 HttpOnly，增加安全性，防止 XSS 攻击和 CSRF 攻击。
- LocalStorage 和 SessionStorage： 由于 JavaScript 可以直接访问，存在被恶意脚本攻击的风险。

原文地址:https://blog.csdn.net/weixin_245249828/article/details/136716607 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：https://www.suanlizi.com/kf/1770265517572100096.html 如若内容造成侵权/违法违规/事实不符，请联系《酸梨子》网邮箱：1419361763@qq.com进行投诉反馈，一经查实，立即删除！

阅读全部