Простое кэширование в JavaScript
AlexSol высказал интересную идею, относительно улучшения аяксовой навигации. Идея замечательная. Но ее можно доработать. Как? Обратите внимание на пример, который он приводит.
При нажатии на одну ссылку, догружается один контент. При нажатии на вторую — другой. Но если снова нажать на первую, снова будет подгружаться первый контент с сервера! Разумнее было бы кэшировать эти данные в браузере и не посылать лишний раз гонца запрос серверу. Хорошо бы прибегнуть к кэшированию.
Как сделать кэширование в JavaScript? Об этом данная статья.
Кэширование, с помощью объекта
Метод, о котором хочу рассказать — это кэширование с помощью объекта JavaScript. Суть в том, что мы создаем хэш-массив объект, имена полей которого совпадают с именами локаций. Значения этих полей — это кэшируемые тексты.
//создаем глобальный объект
var CACHE = new Object();
Как записать в кэш что-то? Проще простого!
CACHE.key = value;
Прочитать значение из кэша ни чуть не сложнее:
alert(CACHE.key);
Кроме того, нужно помнить, что объекты в JS - это по сути, ассоциативные массивы. То есть
CACHE.key == CACHE[key];
Вооружившись этим знанием, приступаем к построению нашего тестового приложения.
Структура html
Для начала, определимся с html. У меня получилось что-то такое:
<html>
<head>
<title>jQurey cache ajax</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
</head>
<body style="width: 100%;">
<div style="margin: 30px auto; font-size: 300%; padding: 20px; text-align: center;">
<a href="#l1" onclick="getData('l1', '1.txt'); return false;">1</a> |
<a href="#l2" onclick="getData('l2', '2.txt'); return false;">2</a> |
<a href="#l3" onclick="getData('l3', '3.txt'); return false;">3</a>
</div>
<div id="res"></div>
</body></html>
Как видно, я решил оставил задел, чтобы сделать красивую навигацию по методу AlexSol-а. Делать я ее не буду, но прикрутить ее потом будет делом двух минут. Пока что, давайте узнаем, что делает функция getData?
var CACHE = new Object(); //создаем объект кэша
function getData(id_loc, url2load) {
if (CACHE[id_loc]) { //если в кэше еще нет нужных данных
//загружаем требуемый файл и вызываем функцию cache_n_go,
//которой передаем содержимое файла и id нажатой ссылки
$.get(url2load, function(data) {cache_n_go(data, id_loc)});
}
//если в кэше уже есть нужные нам данные
else {
//получаем данные из кэша
showRes(CACHE[id_loc] + "(из кэша)");
}
}
Как видно, здесь мы как раз используем преимущества кэширования. Если у нас уже есть данные, то мы берем их из кэша. Если еще нет, то с сервера.
Теперь посмотрим что творится в функции cahce_n_go.
function cache_n_go(text, id_loc) {
CACHE[id_loc] = text;
showRes(text);
}
Ничего сверхъестественного в ней нет. Она кэширует полученый текст и отправляет его функции showRes, чтобы та его показала. Кстати, вот и она:
function showRes(text) {
var res = $('#res');
res.empty();
res.html(text);
}
Как видно, она принимает текст, опустошает блок для вывода контента, и выводит в него то, что ей передали. Вот и все.
![[Valid RSS]](/img/valid-rss-rogers.png)
by SHAman