What's the best way use caching data in js on client side?

不羁岁月 提交于 2019-11-29 02:04:49

As much as cross browser compatibility matters, cookie is the only choice rather than web storage.

But the question really depends on what kind of data you are caching?

For what you are trying, cookie and web-storage might not be needed at all.

  • Cookies are used to store configuration related information, rather than actual data itself.
  • Web storage supports persistent data storage, similar to cookies but with a greatly enhanced capacity and no information stored in the HTTP request header. [1]

I would rather say, it would be stupid to cache the entire page as cookie or web-storage both. For these purposes, server-side caching options might be the better way.

Update:

Quoting:

data about user activity in some social networks (fb, vk, google+)

Detect the web-storage features, using libraries like mordernizr and if does not exists fall back to cookie method. A simple example

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

I wrote this lib to solve the same problem:

Cache your data with Javascript using cacheJS

Here are some basic usages

// 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'})
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!