Как лучше всего использовать кэширование данных в js на стороне клиента?

мое приложение получает данные с другого сервера, используя API с ограниченным числом запросов. Данные меняются редко,но могут понадобиться даже после обновления страницы.

  1. какое лучшее решение этой проблемы, используя cookie или HTML5 Поддерживаются?
  2. и может быть есть другой способ решить эту задачу?
9
cookies html5 javascript web-storage

2 ответов

как крест вопросам совместимости с браузерами, cookie - это единственный выбор, а не веб-хранилище.

но вопрос действительно зависит от какие данные вы кэшируете?

для того, что вы пытаетесь, cookie и веб-хранилище могут вообще не понадобиться.

  • Cookies используются для хранения информации, связанной с конфигурацией, а не фактических данных.
  • веб-хранилище поддерживает постоянный хранилище данных, похожее на cookies, но с значительно увеличенной емкостью и без информации, хранящейся в заголовке HTTP-запроса. [1]

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

обновление:

цитирую:

данные об активности пользователей в некоторых социальных сети (fb, vk, google+)

обнаружение функций веб-хранилища, используя библиотеки, такие как mordernizr и если не существует, вернитесь к методу cookie. простой пример

if (Modernizr.localstorage) {
    // browser supports local storage
    // Use this method
} else {
    // browser doesn't support local storage
    // Use Cookie Method
}

[1]: http://en.wikipedia.org/wiki/Web_storage

7

Я написал этот lib, чтобы решить ту же проблему:

кэшировать данные с помощью Javascript с помощью cacheJS

вот некоторые основные обычаи

// just add new cache using array as key
cacheJS.set({blogId:1,type:'view'},'<h1>Blog 1</h1>');
cacheJS.set({blogId:1,type:'json'}, jsonData);

// remove cache using key
cacheJS.removeByKey({blogId:1,type:'json'});


// add cache with ttl and contextual key
cacheJS.set({blogId:2,type:'view'},'<h1>Blog 2</h1>', 3600, {author:'hoangnd'});

cacheJS.set({blogId:3,type:'view'},'<h1>Blog 3</h1>', 3600, {author:'hoangnd'});


// remove cache with con textual key
// cache for blog 2 and 3 will be removed
cacheJS.removeByContext({author:'hoangnd'})
4