Очень полное и полное объяснение внешнего локального хранилища

внешний интерфейс JavaScript ECMAScript 6

Во время отставки есть люди, которые вербуют по рекомендации, комментарию или личному сообщению моего почтового ящика и компании, я вышлю вам резюме, недавно я работал над основными вещами, и я сделал заметку на github, которая постоянно обновляется, Вы можете пойти и увидеть это, искренняя работа (Первоначально написано для себя...) Адрес ссылки:Front-End-Basics

Адрес этой статьи:Три метода локального хранения

Адрес github основных заметок:GitHub.com/issues книги…, вы можете смотреть, вы также можете звезды.

Текст начинается...

Три метода локального хранения

cookie

предисловие

Одной из самых больших проблем на заре развития сетей было управление состоянием. Короче говоря, сервер не может узнать, исходят ли два запроса от одного и того же браузера. В то время самым простым способом было вставить некоторые параметры в страницу при запросе и передать параметры обратно в следующем запросе. Для этого необходимо использовать скрытую форму с параметрами или передать ее как часть параметров URL. Оба решения являются ручными и подвержены ошибкам. Куки появились для решения этой проблемы.

эффект

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

как работать

Когда веб-страница хочет отправить http-запрос, браузер сначала проверит, есть ли соответствующий файл cookie, и если он есть, он будет автоматически добавлен в поле cookie в заголовке запроса. Браузер автоматически делает это за нас, и каждый http-запрос браузер будет делать за нас автоматически. Эта функция важна, поскольку она связана с тем, «какие данные подходят для хранения в файле cookie».

Данные, хранящиеся в файле cookie, будут автоматически помещаться браузером в HTTP-запрос каждый раз.Если данные не являются данными, которые необходимо отправлять на сервер для каждого запроса, автоматическая обработка браузером, несомненно, увеличит сеть. накладные расходы; но если эти данные являются данными, которые каждый запрос должен отправить на сервер (например, информация для аутентификации), и автоматическая обработка этого параметра браузером значительно устраняет повторные операции добавления. Таким образом, особенно удобно помещать в файл cookie тип настройки «информация, которая будет передаваться в каждом запросе (наиболее типичным примером является информация для аутентификации)», а другие типы данных не подходят.

особенность

  1. Разные браузеры хранят файлы cookie в разных местах и ​​не могут использоваться повсеместно.
  2. Хранение файлов cookie различается в виде доменных имен, а файлы cookie, хранящиеся в разных доменах, являются независимыми.
  3. Мы можем установить домен, в котором файл cookie вступает в силу (субдомен домена, на котором в данный момент установлен файл cookie), то есть файлы cookie, с которыми мы можем работать, — это текущий домен и все поддомены в текущем домене.
  4. Количество файлов cookie, хранящихся под доменным именем, ограничено, и количество файлов cookie, хранящихся в разных браузерах, различно, обычно 20.
  5. Размер содержимого, хранящегося в каждом файле cookie, также ограничен.Различные браузеры имеют разные размеры хранилища, обычно 4 КБ.
  6. Файл cookie также может быть установлен на срок действия.По умолчанию это происходит, когда сеанс заканчивается, и он автоматически уничтожается по истечении времени.

Значение cookie можно как установить, так и прочитать.

настраивать

Настройки клиента

document.cookie = '名字=值';
document.cookie = 'username=cfangxu;domain=baike.baidu.com'    并且设置了生效域

Уведомление:Клиент может установить следующие параметры файла cookie: срок действия, домен, путь, безопасный (условно: только на веб-странице протокола https клиент может успешно установить тип файла cookie безопасный), но не может установить параметр HttpOnly.

Настройки на стороне сервера
Независимо от того, запрашиваете ли вы файл ресурсов (например, html/js/css/image) или отправляете запрос ajax, сервер вернет ответ. В заголовке ответа есть элемент set-cookie, который специально используется сервером для установки файлов cookie.

Set-Cookie 消息头是一个字符串，其格式如下（中括号中的部分是可选的）：
Set-Cookie: value[; expires=date][; domain=domain][; path=path][; secure]

Уведомление:Поле set-Cookie может установить только один файл cookie. Если вы хотите установить несколько файлов cookie, вам нужно добавить как можно больше полей set-Cookie.
Сервер может установить все параметры для файлов cookie: истекает, домен, путь, безопасный, HttpOnly
Эти параметры, указанные Set-Cookie, будут использоваться только на стороне браузера и не будут отправляться на сервер.

читать

Когда мы получаем куки под текущим сайтом через document.cookie, полученное значение в виде строки содержит все куки под текущим сайтом (во избежание атак междоменного скриптинга (xss), этот метод может получить только не HttpOnly тип куки). Он объединит все файлы cookie в виде точки с запятой + пробел, например.username=chenfangxu; job=coding

Изменить файлы cookie

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

Удалить

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

Уведомление

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

атрибуты cookie (необязательно)

Дата истечения срока годности

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

注意：document.cookie = '名称=值;expires=' + GMT(格林威治时间)格式的日期型字符串;

Обычно установите количество дней: new Date().setDate( oDate.getDate() + 5 ); на 5 дней больше, чем текущее время

Пример настройки своевременности файлов cookie

function setCookie(c_name, value, expiredays){
    var exdate=new Date();
    exdate.setDate(exdate.getDate() + expiredays);
    document.cookie=c_name+ "=" + escape(value) + ((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}
使用方法：setCookie('username','cfangxu',30)
expires — это параметр в протоколе http/1.0.В новом протоколе http/1.1 expires был заменен параметром max-age, оба из которых используются для ограничения срока действия файла cookie. Значение expires — это момент времени (время истечения файла cookie = истекает), а значение max-age — это период времени в секундах (время истечения срока действия файла cookie = время создания + максимальный возраст).
Кроме того, значение max-age по умолчанию равно -1 (то есть срок действия равен session ); есть три возможных значения max-age: отрицательное, 0 и положительное.
Отрицательное число: действительный сеанс;
0: удалить файлы cookie;
Положительное число: действительно для времени создания + максимальный возраст

Концепция домена файлов cookie (вариант домена)

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

Браузер выполнит хвостовое сравнение между значением домена и запрошенным доменным именем (то есть начнет с хвоста строки) и отправит соответствующий файл cookie на сервер.

Настройки клиента

document.cookie = "username=cfangxu;path=/;domain=qq.com"
Как указано выше: «www.qq.com» и «sports.qq.com» имеют общее связанное доменное имя «qq.com», если мы хотим, чтобы файлы cookie в разделе «sports.qq.com» использовались «www.qq». .com» Чтобы получить доступ, нам нужно использовать атрибут домена файла cookie, и нам нужно установить атрибут пути в «/».

Настройки сервера

Set-Cookie: username=cfangxu;path=/;domain=qq.com
Примечание. Это должен быть доступ между одними и теми же доменами, и значение домена не может быть установлено на доменное имя, отличное от основного домена.

Концепция пути для файлов cookie (опция пути)

Файлы cookie обычно создаются, когда пользователь посещает страницу, но не только страница, на которой был создан файл cookie, может получить доступ к файлу cookie.
Из соображений безопасности по умолчанию доступны только страницы в том же каталоге или подкаталоге, что и страница, создавшая файл cookie.
То есть атрибут path может указывать файл cookie для документа, специфичного для сервера. URL-адрес, заданный этим атрибутом, и путь URL-адреса с этим префиксом являются допустимыми.

Настройки клиента

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

document.cookie = "username=cfangxu; path=/"

Настройки сервера

Set-Cookie:name=cfangxu; path=/blog

Установите, как указано выше: значение параметра пути будет соответствовать /blog, /blogrool и т. д.; допустимым является любой параметр, начинающийся с /blog. Обратите внимание, что атрибут пути сравнивается только после проверки параметра домена. Значением атрибута пути по умолчанию является часть пути URL-адреса, соответствующая заголовку Send-Cookie.

Сводка домена и пути:

Домен — это имя домена, а путь — это путь. Вместе они образуют URL-адрес. Домен и путь вместе ограничивают URL-адреса, по которым можно получить доступ к файлу cookie. Таким образом, параметры домена и пути вместе определяют, когда файл cookie автоматически добавляется в заголовок запроса браузером и отправляется. Если ни одна из опций не установлена, используются значения по умолчанию. Значением по умолчанию для домена является доменное имя веб-страницы, на которой установлен файл cookie, а значением по умолчанию для пути является каталог веб-страницы, на которой установлен файл cookie.

Безопасность файлов cookie (безопасный вариант)

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

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

document.cookie = "username=cfangxu; secure"

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

Примечание. Если вы хотите установить файл cookie безопасного типа через js в клиенте, то есть на веб-странице, вы должны убедиться, что веб-страница находится под протоколом https. Файл cookie безопасного типа не может быть установлен на веб-странице протокола http.

httpOnly

Этот параметр используется для установки возможности доступа к куки через js. По умолчанию файл cookie не будет иметь параметр httpOnly (т. е. пустой), поэтому по умолчанию клиент может получить доступ (включая чтение, изменение, удаление и т. д.) к этому файлу cookie через код js. Когда файл cookie имеет параметр httpOnly, клиент не может получить доступ (включая чтение, изменение, удаление и т. д.) к этому файлу cookie через код js.

Невозможно установить файл cookie типа httpOnly с помощью кода js на стороне клиента, этот тип файла cookie можно установить только на стороне сервера.

кодировка куки

Файл cookie на самом деле является строкой, но знак равенства, точка с запятой и пробел в этой строке обрабатываются как специальные символы. Поэтому, когда ключ и значение куки содержат эти три спецсимвола, их нужно дополнительно кодировать, обычно кодируют с помощью escape, а декодируют с помощью unescape при чтении; конечно, вы также можете использовать encodeURIComponent/decodeURIComponent или encodeURI/decodeURI,Посмотреть введение в программирование

сторонние файлы cookie

Обычно домен файла cookie совпадает с доменом адреса браузера, который называется основным файлом cookie. Тогда сторонний файл cookie заключается в том, что домен файла cookie не совпадает с доменом в адресной строке.Такой тип файла cookie обычно используется на сторонних рекламных сайтах. Чтобы отслеживать записи о просмотрах пользователей и предлагать пользователям релевантную рекламу в соответствии с собранными привычками пользователей.
Вопросы безопасности, касающиеся сторонних файлов cookie и файлов cookie, можно просмотреть по адресуTickets.WeChat.QQ.com/Yes/OO G IU JC сломался…

localStorage (локальное хранилище)

Новый подход HTML5, ноIE8 и вышеБраузеры совместимы.

Функции

  • Жизненный цикл: постоянное локальное хранилище, если данные не будут активно удалены, срок действия данных никогда не истечет.
  • Сохраненная информация используется совместно в пределах одного домена.
  • Когда эта страница работает (добавляет, изменяет, удаляет) localStorage, эта страница не будет инициировать событие хранения, но другие страницы будут вызывать событие хранения.
  • Размер: Говорят, что 5M (связано с производителем браузера)
  • Его можно открыть локально в браузерах, отличных от IE. Браузер IE должен быть открыт на сервере.
  • localStorage — это, по сути, чтение строк.Если в хранилище много содержимого, оно будет занимать место в памяти и вызывать зависание страниц.
  • localStorage подчиняется политике того же происхождения

настраивать

localStorage.setItem('username','cfangxu');

Получать

localStorage.getItem('username')
Вы также можете получить имя ключа
localStorage.key(0) #获取第一个键名

Удалить

localStorage.remove('username')
Также можно очистить все хранилище сразу
localStorage.clear()

событие хранения

Срабатывает при изменении хранилища.
Уведомление:Операция текущей страницы в хранилище вызовет событие хранения других страниц.
В функции обратного вызова события есть событие параметра, которое является объектом StorageEvent, который предоставляет некоторые полезные свойства, как показано в следующей таблице:

Property Type Description
key String The named key that was added, removed, or moddified
oldValue Any The previous value(now overwritten), or null if a new item was added
newValue Any The new value, or null if an item was added
url/uri String The page that called the method that triggered this change

sessionStorage

По сути это похоже на localStorage, это тоже локальное хранилище, локальное хранилище сессии

Функции:

  • Он используется для локального хранения данных в сеансе, к которым могут получить доступ только страницы в том же сеансе, и они уничтожаются при завершении сеанса. Таким образом, sessionStorage — это не постоянное локальное хранилище, а только хранилище на уровне сеанса. То есть, пока окно браузера не закрыто, даже если страница обновляется или вводится другая страница того же происхождения, данные все еще существуют. После закрытия окна sessionStorage уничтожается, либо в новом окне открывается другая страница того же происхождения, и sessionStorage недоступен.

Различия между файлами cookie, localStorage и sessionStorage

  • То же: хранить данные локально (на стороне браузера)
  • разные:

    локальное хранилище, хранилище сессий

    LocalStorage может читать/изменять одни и те же данные localStorage, если они находятся под тем же протоколом, тем же именем хоста и тем же портом.

    SessionStorage немного более строгий, чем localStorage, помимо протокола, имени хоста и порта, он также должен находиться в том же окне (то есть на вкладке браузера).

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

    sessionStorage автоматически уничтожается при завершении сеанса (при закрытии текущей страницы)

    Данные cookie будут отправляться на сервер каждый раз при отправке http-запроса, а localStorage и sessionStorage — нет.

Категории