No store web html

HTML Web Storage API

With web storage, web applications can store data locally within the user’s browser.

Before HTML5, application data had to be stored in cookies, included in every server request. Web storage is more secure, and large amounts of data can be stored locally, without affecting website performance.

Unlike cookies, the storage limit is far larger (at least 5MB) and information is never transferred to the server.

Web storage is per origin (per domain and protocol). All pages, from one origin, can store and access the same data.

Browser Support

The numbers in the table specify the first browser version that fully supports Web Storage.

API
Web Storage	4.0	8.0	3.5	4.0	11.5

HTML Web Storage Objects

HTML web storage provides two objects for storing data on the client:

• window.localStorage — stores data with no expiration date
• window.sessionStorage — stores data for one session (data is lost when the browser tab is closed)

Before using web storage, check browser support for localStorage and sessionStorage:

if (typeof(Storage) !== «undefined») <
// Code for localStorage/sessionStorage.
> else <
// Sorry! No Web Storage support..
>

The localStorage Object

The localStorage object stores the data with no expiration date. The data will not be deleted when the browser is closed, and will be available the next day, week, or year.

Example

// Retrieve
document.getElementById(«result»).innerHTML = localStorage.getItem(«lastname»);

• Create a localStorage name/value pair with name=»lastname» and value=»Smith»
• Retrieve the value of «lastname» and insert it into the element with >The example above could also be written like this:

// Store
localStorage.lastname = «Smith»;
// Retrieve
document.getElementById(«result»).innerHTML = localStorage.lastname;

The syntax for removing the «lastname» localStorage item is as follows:

Note: Name/value pairs are always stored as strings. Remember to convert them to another format when needed!

The following example counts the number of times a user has clicked a button. In this code the value string is converted to a number to be able to increase the counter:

Example

if (localStorage.clickcount) <
localStorage.clickcount = Number(localStorage.clickcount) + 1;
> else <
localStorage.clickcount = 1;
>
document.getElementById(«result»).innerHTML = «You have clicked the button » +
localStorage.clickcount + » time(s).»;

The sessionStorage Object

The sessionStorage object is equal to the localStorage object, except that it stores the data for only one session. The data is deleted when the user closes the specific browser tab.

The following example counts the number of times a user has clicked a button, in the current session:

Example

if (sessionStorage.clickcount) <
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
> else <
sessionStorage.clickcount = 1;
>
document.getElementById(«result»).innerHTML = «You have clicked the button » +
sessionStorage.clickcount + » time(s) in this session.»;

Источник

Cache-Control

Cache-Control — это HTTP-заголовок , который определяет количество времени и способ htaccess кэширования файла:

В этой статье мы расскажем, как использовать Cache-Control . Большинство современных сайтов используют Cache-Control для управления кэшированием браузеров.

Основные принципы использования заголовка Cache-Control

Заголовок Cache-Control определяет количество времени, которое файл должен находиться в кэше, и метод кэширования:

Cache-Control: max-age=2592000, public

При обращении к файлу через браузер также извлекаются HTTP-заголовки . Когда заголовок Cache-Control включен, браузер будет его учитывать.

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

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

Что такое max-age?

max-age определяет время, в течение которого файл должен храниться в кэше.

Директива ответа max-age указывает, что ответ следует считать устаревшим после того, как проходит больше времени, чем заданное количество секунд.

Применение max-age

Часть заголовка max-age выглядит следующим образом:

Значение max-age задается в секундах.

Часто используемые значения для max-age :

• Одна минута: max-age=60 ;
• Один час: max-age=3600 ;
• Один день: max-age=86400 ;
• Одна неделя: max-age=604800 ;
• Один месяц: max-age=2628000 ;
• Один год: max-age=31536000 .

При применении max-age для определения времени, которое файл должен храниться в кэше, следует учитывать тип этого файла и то, как он используется.

Директивы кэширования

Часть директивы кэширования в браузере htaccess приведенного выше заголовка выглядит следующим образом:

Директива приведенного выше заголовка Cache-Control объявляет » public «. Это означает, что файл может кэшироваться публично ( в отличие от случая, если бы это был private файл ).

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

Мы рассмотрим три основные директивы Cache-Control :

public

Директива » public » означает, что любой человек может осуществлять кэширование файлов htaccess на любом уровне.

Официальная спецификация определяет ее следующим образом:

Директива «public» указывает на то, что ответ может сохраняться где угодно в кэше, даже если он является некэшируемым или кэшируемым только в частном кэше.

Если вы хотите использовать кэширование для ускорения загрузки страницы, и этот ресурс не является частным, то нужно применить директиву public .

private

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

Официальная спецификация определяет ее следующим образом:

Директива «private» указывает, что ответ предназначен для одного пользователя и не должен сохраняться в общедоступном кэше. Частный кэш может сохранять ответ и повторно использовать его для последующих запросов, даже если ответ является некэшируемым.

Если я зайду на Twitter.com , а затем обновлю страницу, некоторые элементы будут сохранены для меня с помощью кэширования и сжатие htaccess , а для вас нет. Если вы зайдете на Twitter.com и обновите страницу, некоторые элементы будут сохранены для вас в кэше, а для меня нет.

no-store

Директива no-store является самым категоричным запретом на кэширование. Официальная спецификация определяет ее следующим образом:

Директива «no-store» указывает на то, что в кэше не должны сохраняться части ни запроса, ни ответа. Эта директива применяется как для частного, так и для публичного кэша.

Еще раз отмечу, что само по себе это ничего не гарантирует.

Типы файлов

Два вопроса, которые должен задать себе веб-мастер:

• Какие типы файлов нужно хранить с помощью кэширования файлов htaccess?
• Как долго их нужно хранить в кэше?

Какие типы файлов должны храниться в кэше?

Я хотел бы отметить следующие типы файлов:

• Изображения — PNG , JPG , GIF и другие. Изображения практически не меняются, поэтому они могут храниться в кэше длительное время ( год );
• CSS файлы — изменяются чаще, чем другие файлы, для их хранения может потребоваться более короткий период времени (неделя или месяц);
• ICO ( Favicon ) — редко меняются ( год );
• JS – код JavaScript не изменяются слишком часто, поэтому для них можно задать средний период хранения (месяц).

Что следует учесть

Только вы можете определить, какие инструкции больше всего подходят для вашего сайта. Если вы собираетесь изменить какой-либо ресурс ( например, файл CSS ), и этот ресурс кэшируется в браузере htaccess , то стоит подумать над тем, чтобы изменить имя файла. Тогда обновленный файл CSS будет просмотрен всеми пользователями. Это называется URL-дактилоскопией .

Благодаря уникальному имени пользователи будут загружать новый ( не кэшированный ) вариант ресурса. Например, если ваш файл CSS имеет имя » main.css «, вместо этого можно назвать его » main_1.css «. В следующий раз, когда снова измените его, назовите » main_2.css «. Это полезно для файлов, которые изменяются через определенные периоды времени.

Как добавить Cache-Control на сайт

Cache -Control добавляется к файлам точно так же, как любой другой заголовок на вашем сервере. В этой статье мы говорим о заголовке Cache-Control . Так как его добавить? Это зависит от вашего веб-сервера. Мы рассмотрим наиболее распространенные сценарии.

Файл .htaccess

Большинство использует для добавления заголовков файл .htaccess .

Пример кода файла .htaccess

Общий код для установки заголовка Cache-Control с помощью файла .htaccess :

Header set Cache-Control "max-age=2628000, public"

Но приведенный выше код не позволяет задавать различные инструкции кэширования сайта htaccess для различных типов файлов.

Чтобы применить разные заголовки Cache-Control к различным типам файлов, мы будем использовать:

# One month for most static assets Header set Cache-Control "max-age=2628000, public" 

Приведенный выше код означает следующее:

» Если тип файла CSS, JPEG, JPG, PNG, GIF, JS или ICO, применить к нему следующий заголовок «.

Предположим, что мы хотим изменить время кэширования изображений на один год, но оставить для файлов CSS и JS срок хранения один месяц.

Мы можем добавить в файл .htaccess следующий код:

# One year for image files Header set Cache-Control "max-age=31536000, public" # One month for css and js Header set Cache-Control "max-age=2628000, public" 

Приведенный выше код состоит из двух блоков: один для изображений и один для CSS и JS-файлов . У нас может быть несколько блоков в файле .htaccess .

Конфигурация Apache http.conf

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

Используйте сочетание filesMatch и Header , чтобы создать отдельные инструкции для конкретных типов файлов ( примеры кода для файла .htaccess подходят ).

NGINX

Используя директивы expires, можно добавить инструкции кэширования в блоки сервера или местоположения:

location ~* .(jpg|jpeg|png|gif|ico|css|js)$

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

Litespeed

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

Если у вас нет лицензии, то необходимо будет использовать кэширование сайта htaccess . Приведенные выше инструкции для использования в .htaccess подходят также и для серверов Litespeed .

Источник