Клиент хранит файлы cookie + localStorage + sessionStorage, а сервер хранит файлы cookie + сеанс.

Предисловие: данные, необходимые для многих однородных страниц, могут храниться с помощью файлов cookie, localStorage или sessionStorage. Но данные не должны быть слишком большими, поскольку размер клиентского хранилища ограничен.

Политика одного и того же происхождения: стратегия безопасности для браузеров

Одно и то же происхождение: если протокол, IP и порт (доменное имя можно рассматривать как комбинацию IP и порта) одинаковы, они считаются имеющими одно и то же происхождение.

например: номер порта Baidu по умолчанию 443

Хранилище на стороне клиента ограничено одним и тем же источником: если оно происходит из того же источника, использование файлов cookie, localStorage или sessionStorage для хранения данных на этой странице также может использоваться на других страницах.

1.локальное хранилище

1. Сохраните данные через localStorage.setItem(ключ, значение)

localStorage.setItem(key,value); Хранить в виде пар ключ-значение.

localStorage.setItem('stuname','蓝色天空');
localStorage.setItem('stuage',22);

2. Характеристики хранилища localStorage

1. Сохраняйте данные через localStorage и сохраняйте их постоянно, пока они не будут очищены.

2. Размер хранилища: около 5 м.

3. Получите сохраненные данные через localStorage.getItem(key)

console.log(localStorage.getItem('stuage'));
console.log(localStorage.getItem('stuname'));

4. Очистите определенные данные, хранящиеся в localStorage, с помощью localStorage.removeItem(key).

Этот метод очищает только данные, хранящиеся в определенном локальном хранилище.

5. Очистите все данные, хранящиеся в localStorage, с помощью localStorage.clear().

Этот метод очищает все данные, хранящиеся через localStorage.

2.хранилище сеансов

1. Сохраните данные через sessionStorage .setItem(ключ, значение)

    <body>
        <a href="./客户端存储数据的获取.html">跳到</a>
        <h1>存储数据</h1>
        <script>
           sessionStorage.setItem('flower','红玫瑰');
           sessionStorage.setItem('age',22);
        </script>
    </body>

2. Получите сохраненные данные через sessionStorage.getItem(key)

console.log(sessionStorage.getItem('flower'));
console.log(sessionStorage.getItem('age'));

3. Особенности хранилища sessionStorage

1. sessionStorage ограничен не только одним и тем же источником, но и одним и тем же окном ( данные, хранящиеся в sessionStorage, можно получить только из окна, открытого в этом окне )

например: На странице окна данных хранилища щелкните гиперссылку, чтобы перейти на страницу окна сбора данных хранилища клиента. Если это из того же источника или из окна, открытого в этом окне, данные, хранящиеся в этом окне, можно получить через sessionStorage. .

Если вы напрямую откроете страницу окна сбора данных хранилища клиента, вы не сможете получить данные, хранящиеся через sessionStorage, на странице окна данных хранилища.

2. Данные, хранящиеся через sessionStorage, станут недействительными, как только окно браузера закроется.

4. Очистите определенные данные, хранящиеся через sessionStorage, с помощью sessionStorage .removeItem(key)

Этот метод очищает только данные, хранящиеся в определенном хранилище сеансов.

5. Очистите все данные, хранящиеся в sessionStorage, с помощью sessionStorage .clear().

Этот метод очищает все данные, хранящиеся через sessionStorage.

            document.cookie = 'beauty = 宋花花';
            document.cookie = 'age = 22';

//存储
document.cookie = `stuage=21`;
document.cookie = `stuname1=red`;

//获取
console.log(document.cookie);

3. Очистите данные, хранящиеся в файлах cookie.

Как правило, нет необходимости очищать данные для файлов cookie, поскольку они будут автоматически удалены по истечении срока их действия. Если вы хотите, чтобы они были удалены немедленно, вы можете установить срок их действия равным 0.

document.cookie = `stuname1=red;max-age=${0};path=/`;

Или удалите его прямо в браузере.

1. путь путь

Если путь не указан, по умолчанию используется папка, в которой находится html-файл, в котором файл cookie хранит данные . То есть только файлы в этой папке могут получить доступ к данным, хранящимся в файле cookie. Файлы, не находящиеся в этой папке, не могут.

Поэтому значение атрибута пути обычно устанавливается в корневой каталог всего проекта, чтобы файлы во всем корневом каталоге могли получить доступ к значению, хранящемуся в файле cookie.

document.cookie = `stuname1 = 100;path=/`;

Анализ: path=/ означает установку пути к корневому каталогу всего проекта. Другие файлы в рамках этого проекта также могут получить доступ к данным, хранящимся в файлах cookie.

2. Срок годности Expires/Max-Age: установите срок годности с помощью Max-Age.

Если срок действия не указан: по умолчанию используется сеанс, что означает, что окно исчезает, как только оно закрывается (другие файлы в каталоге, где находится файл, не могут получить доступ к значению, хранящемуся в файле cookie).

Укажите срок действия: Примечание. Эта единица измерения — секунды, а не миллисекунды.

например: Срок действия истекает через 7 дней (максимальный возраст обычно указывается перед путем)

 document.cookie = `stuname1 = 100;max-age=${7*24*60*60};path=/`;

Анализ: Настройка прошла успешно.

вопрос:

Вопрос: Если домен, путь и максимальный возраст одинаковы, будет ли файл cookie хранить два данных с именем stuname1, если он установлен дважды?

//域名，path,max-age 都相同
document.cookie = `stuname1=blue`;
document.cookie = `stuname1=red`;

результат:

Анализ: это эквивалентно установке того же атрибута, и последний переопределяет первый.

3. Время истечения срока действия Expires/Max-Age устанавливает время истечения срока действия с помощью Expires.

Примечание. Если вы устанавливаете время истечения срока действия с помощью Expires, единицей измерения являются не секунды. Это формат, который Expires распознает, и вам необходимо установить его вручную.

        <script>
            //存储
            let tim = new Date(); //得到是现在的时间
            tim.getTime();        //拿到当前的时间戳  毫秒值
            // tim.getTime()+7*24*60*60*1000  //未来7天   这是未来7天的时间戳
            tim.setTime(tim.getTime()+7*24*60*60*1000);//传一个时间戳，就可以把传入的时间戳转成对应的时间
            console.log(tim); //这个时候打印 tim 就不是当前的时间了而是未来7天的时间
            //然后转换为 Expires 可以识别的时间格式  调用toGMTString方法
            document.cookie = `stuname1=red;expires=${tim.toGMTString()};path=/`;
        </script>

1. Размер хранилища: около 4K

2. Если срок действия не установлен, он истечет, как только окно будет закрыто. Если он установлен, он истечет, как только будет установлен срок действия.

    <script>
        function setCookie(key, value, day) {
            document.cookie = `${key}=${value};max-age=${day*24*60*60};path=/`;
            //针对于 Expires
            // let tim = new Date();
            // tim.getTime();
            // tim.setTime(tim.getTime() + day * 24 * 60 * 60 * 1000);
            // document.cookie = `${key}=${value};expires=${tim.toGMTString()};path=/`; 
        }
        //setCookie(key,value,day); //这里day表示天数
        setCookie('stuage', '21', 7);
        setCookie('stuname','宋花花',7);
        setCookie('num',200,7);
    </script>

Получите сохраненные данные, результат:

console.log(document.cookie); //'num=200; stuage=21; stuname=宋花花'

Анализ: все данные, хранящиеся в файле cookie, будут помещены в строку и распечатаны.

2. Получите пакет данных хранения файлов cookie.

Анализ: через document.cookie вы получаете все данные, сохраненные с помощью файлов cookie, но если вы просто хотите сохранить определенные данные с помощью файлов cookie, это невозможно. Функция, инкапсулированная здесь, может быть достигнута.

    <script>
        function getCookie(key){
            let allCookie = document.cookie;          //'num=200; stuage=21; stuname=宋花花'
            let allCookieArr = allCookie.split('; '); //['num=200', 'stuage=21', 'stuname=宋花花']
            for(let i=0;i<allCookieArr.length;i++){
                if(allCookieArr[i].includes(key)){
                    return allCookieArr[i].split('=')[1]; //['stuname','宋花花']
                }
            }
            return null;                 
        }   
        console.log(getCookie('stuname')); //宋花花
    </script>

Установив срок действия с помощью файлов cookie, вы можете настроить определение статуса входа пользователя. Если срок его действия истечет, вам необходимо снова войти в систему.

Вход: страница входа

<body>
    <form>
        <!-- 手机号11位数 -->
        账号: <input type="text" name="account">
        <br>
        <!-- 6-12位 -->
        密码: <input type="password" name="pwd">
        <br>
        <input type="button" value="登录" id="loginBtn">
    </form>
    <script>
        let loginBtn = document.querySelector('#loginBtn');
        let account = document.querySelector('input[name="account"]');
        let pwd = document.querySelector('input[name="pwd"]');
        loginBtn.onclick = function () {
            //判断账号和密码是否满足格式--正则(前端)
            let reg = /^1[3-9]\d{9}$/ig;
            if (!reg.test(account.value)) {
                alert('账号输入的手机格式不对,请重新输入');
                return;
            }
            if (pwd.value.length < 6 || pwd.value.length > 12) {
                alert('密码格式不对,请输入6-12位的密码');
                return;
            }
            //把账号和密码存入到cookie里面,设置过期时间,可以判断用户的登录状态,如果过期了就需要重新登录
            function setCookie(key, value, day) {
                document.cookie = `${key}=${value};max-age=${day*24*60*60};path=/`;
            }
            //setCookie(key,value,day); //这里day表示天数
            setCookie('account',account.value, 7);
            setCookie('pwd',pwd.value, 7);
            window.location.href = './stuname.html';
        }
    </script>
</body>

Страница сведений об ученике:

<body>
    <h1>学生详情页</h1>
    <script>
        function getCookie(key){
            let allCookie = document.cookie;         
            let allCookieArr = allCookie.split('; '); 
            for(let i=0;i<allCookieArr.length;i++){
                if(allCookieArr[i].includes(key)){
                    return allCookieArr[i].split('=')[1]; 
                }
            }
            return null;                 
        }
        //判断用户是否处于登录状态,就是看cookie保存的账号和密码过期没有,过期了就要回到登录页面重新登录 
        if(!getCookie('account')){
            window.location.href = './login.html';
        }else{
            console.log(getCookie('account'));
        }
        
         
    </script>
</body>

-------------------------------------------------- -----------------------------------

Сервер хранит файлы cookie + сеанс

Объяснение файлов cookie и сеансов на основе яиц:

Адрес официального сайта: Cookie and Session — Egg (eggjs.org)

1. Установите файлы cookie: ctx.cookies.set(key, value) ;

 ctx.cookies.set('num1',100);
 ctx.cookies.set('num2',200);

Интерфейсная часть использует структуру axios для выполнения Ajax-запросов файлов cookie, установленных серверной частью. Вы можете найти файлы cookie, установленные внутренним сервером, в заголовке ответа , соответствующем консоли браузера (интерфейс для настройки серверной части). конец файла cookie).

3. Несколько ajax-запросов на одной странице одновременно. Примечание. Тот, кто первым запросит внутренний сервер выполнить запрос, первым выполнит запрос .

Ajax- запросы являются асинхронными . Страница может инициировать несколько ajax-запросов одновременно . Однако ajax-запрос не означает, что какой бы из них ни был написан первым, он будет выполнен первым . Но когда страница инициирует ajax-запрос одновременно, одновременно инициируется несколько ajax-запросов. Тот, кто запрашивает внутренний сервер первым выполнить запрос, первым выполнит запрос .

Когда страница инициирует несколько ajax-запросов одновременно, неясно, какой ajax-запрос будет выполнен первым, поскольку маршрутизация каждого ajax-запроса имеет разные функции и время, которое на это уходит, разное .

Вопрос: Что мне делать, если я хочу получить файл cookie, установленный серверной частью, после завершения запроса?
так:

    <script>
        axios.get(`http://127.0.0.1:7001/setcookie`)
            .then(function (response) {
                //请求后端接口成功就会执行，请求成功后的数据放在response里面
                console.log('cookie设置成功:', response);
            })
            .catch(function (error) {
                console.log(error);
            })

        axios.get(`http://127.0.0.1:7001/getcookie`)
            .then(function (response) {
                console.log('cookie获取成功:', response);
            })
            .catch(function (error) {
                console.log(error);
            })
    </script>

Анализ: одновременно инициируются два ajax-запроса. Нет гарантии, какой из них будет выполнен первым, поэтому описанное выше невозможно.

    <script>
        axios.get(`http://127.0.0.1:7001/setcookie`)
            .then(function (response) {
                console.log('cookie设置成功:', response);
                //请求完成，并成功  cookie设置完成  才进行取 cookie
                axios.get(`http://127.0.0.1:7001/getcookie`)
                    .then(function (response) {
                        console.log('cookie获取成功:', response);
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
            })
            .catch(function (error) {
                console.log(error);
            })
    </script>

Анализ: только таким образом мы можем гарантировать, что серверные файлы cookie настроены до того, как их можно будет получить.

4. Сводка файлов cookie сервера: (очень важно)

cookie:设置cookie:ctx.cookies.set(ключ,значение)

Получить файлы cookie: ctx.cookie.get(ключ)

1. Место хранения внутренних файлов cookie. Файлы cookie, установленные серверной частью, будут храниться в клиентском браузере, а файлы cookie, установленные внешним интерфейсом, также находятся в клиентском браузере и находятся в том же месте.

2. Файлы cookie в клиентском браузере (файлы cookie, установленные как интерфейсной, так и внутренней частью браузера клиента) появятся в заголовке запроса. Причина в том, что каждый раз, когда делается запрос, файлы cookie сохраняются в клиент будет отправлен на сервер (независимо от того, является ли это файлом cookie, установленным внешним интерфейсом, или файлом cookie, установленным серверной частью) --> Каждый раз, когда внешний интерфейс инициирует запрос (пока запрос имеет заголовок запроса, он перенесет файл cookie и отправит его на сервер)

Анализ: файлы cookie появятся в заголовке запроса только в том случае, если они взяты из одного и того же источника, а файлы cookie не появятся в заголовке запроса, если они из разных источников. Если разные источники также хотят, чтобы файлы cookie отображались в заголовках запросов, они должны настроить файлы cookie для разных доменов.

3. Установите файлы cookie на серверной части и ограничьте нормальное хранение и получение передачи одним и тем же источником (в заголовке запроса есть файлы cookie). Если вы хотите нормально хранить и получать в междоменных ситуациях, вам необходимо настроить чтобы разрешить междоменное хранение файлов cookie. -->Междоменные настройки.

01. В случае одного и того же источника внутренний файл cookie, хранящийся в браузере, можно получить, отправив запрос ajax через внутренний код ctx.cookie.get(key).

Код внешнего интерфейса:

    <script>
        axios.get(`http://127.0.0.1:7001/setcookie`)
            .then(function (response) {
                console.log('cookie设置成功:', response);
                //请求完成，并成功  cookie设置完成  才进行取 cookie
                axios.get(`http://127.0.0.1:7001/getcookie`)
                    .then(function (response) {
                        console.log('cookie获取成功:', response);
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
            })
            .catch(function (error) {
                console.log(error);
            })
    </script>

Серверный код:

Фронтальные результаты:

02. В случае разных источников серверный файл cookie, хранящийся в браузере, не может быть получен путем отправки ajax-запроса и последующего получения его через внутренний код ctx.cookie.get(key).

03. Если он не из того же источника, и вы хотите отправить внутренний файл cookie, хранящийся в браузере, отправив запрос ajax, а затем получить его через внутренний код ctx.cookie.get(key) , вам необходимо выполнить междоменную настройку:

Бэкэнд-яйцо должно быть установлено:

  //配置cors：在 config/config.default.js
  // 跨域的配置
  config.cors = {
    // origin: '*', //允许的域，*代表所有的
    //origin: 'http:127.0.0.1:80', //如果想携带cookie,这里必须指定ip和端口号
    origin: 'http:127.0.0.1',
    allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH', //允许跨域的请求方法
    credentials:true //后端允许跨域携带cookie
  };

Анализ: origin: 'http:127.0.0.1:80' Если здесь написан номер порта 80, то в адресной строке браузера также должен быть написан номер порта 80. Даже если его можно опустить, необходимо добавить 80, иначе будет междоменным. Но лучше не писать 80, потому что 80 — это порт apache по умолчанию, и браузер автоматически пропустит 80, и здесь снова пишется 80, но междоменные требования очень строгие и должны совпадать с конфигурацией. , даже если его можно опустить, поэтому лучше не писать 80 (потому что, если вы это сделаете, браузер также напишет 80, но он будет автоматически опущен, что отличается от этого, и он сообщит о междоменном доступе)

Также необходимо настроить внешний интерфейс: если это запрос на получение :

//表示跨域请求时是否需要使用凭证(cookie)
//withCredentials: true  表示需要
axios.get(url,{params:dataObj, withCredentials: true })

Анализ: не требуется по умолчанию, это неверно. Если требуется междоменная передача файлов cookie, это правда. Должны быть установлены как настройка запроса, так и получение внутренних файлов cookie :

            axios.get(`http://127.0.0.1:7001/setcookie`, {
                withCredentials: true
            })
            .then(function (response) {
                console.log('cookie设置成功:', response);
                //请求完成，并成功  cookie设置完成  才进行取 cookie
                axios.get(`http://127.0.0.1:7001/getcookie`, {
                        withCredentials: true
                    })
                    .then(function (response) {
                        console.log('cookie获取成功:', response);
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
            })
            .catch(function (error) {
                console.log(error);
            })

Также необходимо настроить внешний интерфейс: если это запрос на публикацию:

axios.post(url,dataObj,{withCredentials: true })

 axios.post('http://127.0.0.1:8000/login', {
            //给后端传递的数据
            account: account,
            pwd: pwd
        },{withCredentials: true })
        .then(function (response) {
            //请求后端成功后，后端返回给前端的数据：response
            console.log(response);
            alert(response.data.data);
            if (response.data.data == '登录成功') {
                //账号和密码正确就跳转到student.html
                window.location.href = './students.html';
            }
        })
        .catch(function(error){
            //请求后端失败了，失败原因在error
            console.log('请求后端失败了，失败原因为:',error);
        })

результат:

2. Внутренний сервер сохраняет сеанс.

1.Установить сеанс ctx.session.Имя атрибута = 'значение';

  async setsession() {
    const {ctx} = this;
    ctx.session.id = 101;
    ctx.session.account = '18996883123';
    ctx.body = 'session设置成功';
  }

2. Получите имя сеанса ctx.session.property.

  async getsession() {
    const {ctx} = this;
    let id = ctx.session.id;
    let account = ctx.session.account;
    ctx.body = {
      id,account
    };
  }

3. Как и файлы cookie, сеансы могут быть установлены и получены обычным образом только в том случае, если они не являются междоменными, и не могут быть получены, если они являются междоменными.

В случае одного и того же происхождения: как внешний, так и внутренний коды находятся в яйце.

В случае разных источников: код внешнего интерфейса находится в Apache, а внутренний код — в яйце.

4. В случае одного и того же происхождения: когда серверная часть использует сеанс для хранения данных, она создает файл cookie (EGG_SESS), и этот файл cookie будет автоматически сохраняться в клиентском браузере.

5. В случае разных источников: когда серверная часть использует сеанс для хранения данных, он все равно создаст файл cookie (EGG_SESS), но этот файл cookie не будет сохранен в клиентском браузере).

6. В случае без междоменного доступа: когда серверная часть использует сеанс для хранения данных, будет создан уникальный файл cookie (EGG_SESS), а затем, когда серверная часть (не интерфейс, устанавливающий сеанс, другие внутренние интерфейсы) хочет получить сохраненные данные сеанса, соответствующий сеанс должен быть проанализирован на основе значения cookie, созданного при использовании сеанса для хранения данных.

Анализ: когда серверная часть сохраняет данные через сеанс, она автоматически генерирует файл cookie (EGG_SESS) и сохраняет его во внешнем браузере. Затем, когда данные в сеансе необходимо получить, интерфейсная часть помещает сгенерированные cookie (EGG_SESS) в заголовке запроса. Передается на серверную часть, и серверная часть анализирует данные, сохраненные в сеансе, на основе этого значения cookie.

7. Если вы хотите добиться эффекта 6 в междоменной ситуации, необходимо настроить междоменность. Аналогично настройке междоменных файлов cookie.

Бэкэнд-яйцо должно быть установлено:

  //配置cors：在 config/config.default.js
  // 跨域的配置
  config.cors = {
    // origin: '*', //允许的域，*代表所有的
    //origin: 'http:127.0.0.1:80', //如果想携带cookie,这里必须指定ip和端口号
    origin: 'http:127.0.0.1',
    allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH', //允许跨域的请求方法
    credentials:true //后端允许跨域携带cookie
  };

Также необходимо настроить внешний интерфейс: если это запрос на получение :

//表示跨域请求时是否需要使用凭证(cookie)
//withCredentials: true  表示需要
axios.get(url,{params:dataObj, withCredentials: true })

    <script>
        axios.get(`http://127.0.0.1:7001/setsession`, {
                withCredentials: true
            })
            .then(function (response) {
                console.log('setsession设置成功:', response);
                //请求完成，并成功  cookie设置完成  才进行取 cookie
                axios.get(`http://127.0.0.1:7001/getsession`, {
                        withCredentials: true
                    })
                    .then(function (response) {
                        console.log('getsession获取成功:', response);
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
            })
            .catch(function (error) {
                console.log(error);
            })
    </script>

Также необходимо настроить внешний интерфейс: если это запрос на публикацию:

axios.post(url,dataObj,{withCredentials: true })

результат:

8. Для хранения некоторых важных данных используйте сеанс, поскольку файлы cookie будут доступны в браузере, а сеанс получает данные посредством внутреннего декодирования. Никакие данные не передаются браузеру.

9. В клиентском браузере хранилищем сеансов создается только один файл cookie.

например: когда ваш бэкэнд пишет интерфейс входа в систему, вам необходимо использовать сеанс для хранения данных. Соответствующий интерфейс сгенерирует значение файла cookie ( cookie (EGG_SESS)). Затем, когда ваш бэкэнд записывает интерфейс регистрации, вам нужно использовать сеанс для хранения данных. В настоящее время внешний интерфейс не будет генерировать новое значение файла cookie ( cookie (EGG_SESS)). Браузер клиента имеет только один файл cookie ( cookie (EGG_SESS)), созданный в ходе сеанса , но данные в ( файл cookie (EGG_SESS)) будет изменен в связи с сеансом. Хранилище другое и будет обновляться, но во всем клиентском браузере имеется только один файл cookie, созданный в ходе сеанса (cookie (EGG_SESS ) )

10.Сессия имеет конфигурацию по умолчанию (включая срок действия) + удалить сессию.

В файле config.default.js платформы Egg.

exports.session = {
  key: 'EGG_SESS',
  maxAge: 24 * 3600 * 1000, // 默认是1 天
  httpOnly: true,
  encrypt: true,
};

Вы также можете установить время окончания сеанса в коде (но это не рекомендуется)

//设置session得过期时间（1分钟后过期）
ctx.session.maxAge = 60*1000;

Если вы хотите удалить сеанс, напрямую присвойте ему значение null.

ctx.session = null;