sessionStorage 、localStorage 和 cookie 之间的共同点：
都是保存在浏览器端，且同源的。
sessionStorage 、localStorage 和 cookie 之间的区别：
cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。
Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。
Web Storage 的 api 接口使用更方便。
封装的localStorage的方法，可以控制存储数据的条数，以及时间
define(function (require) { var $ = require('jquery'); var Cache = {}; function support() { var _t = !(typeof window.localStorage === 'undefined'); return _t; } $.extend(Cache, { config: { size: 5, // lifeTime: 86400 //一天的秒数 lifeTime: 1*60 }, localStorage: window.localStorage, memQueue: (function () { if (support()) { var jsonStr = window.localStorage.getItem('LRUConfig'); return jsonStr ? JSON.parse(jsonStr) : { keys: {}, objs: [] }; } else { return {}; } })(), get: function(appid, url) { if (true == support()) { var key = appid + ':' + url; //开始做LRU算法。 this.LRU(key); //LRU算法结束。 var isFresh = true; var nowTime = (new Date()).getTime() / 1000; if(key in this.memQueue.keys){ var cacheTime = this.memQueue.keys[key].life / 1000; //如果过期时间超过 配置的lifeTime， //则清除掉当前缓存 if(nowTime - cacheTime >= this.config.lifeTime){ delete this.memQueue.keys[key]; for (var i=0, len = this.memQueue.objs.length; i < len; i++) { var _o = this.memQueue.objs[i]; if(_o.key == key){ this.memQueue.objs.splice(i,1); break; } } isFresh = false; } } //如果isFresh为假，就是已过期，则返回null，否则从localStorage中取 return (false == isFresh) ? null : this.localStorage[key]; } }, set: function(appid, url, value) { if (true == support()) { var key = appid + ':' + url; var lruKey = this.getLRU(); //淘汰最近最少使用的这个。 //另外起一个方法读取最符合淘汰的这个 //前提是当前这个key，不在localStorage里面。 if (lruKey) { this.localStorage.removeItem(lruKey); } //开始设置一下这个值 //为了兼容性，用以下方法设置 if (typeof this.memQueue.objs != 'undefined' && this.memQueue.objs.length <= this.config.size) { this.localStorage.removeItem(key); } else { while (this.memQueue.objs.length >= this.config.size) { var lruKey = this.getLRU(); //淘汰最近最少使用的这个。 //另外起一个方法读取最符合淘汰的这个 if (lruKey) { this.localStorage.removeItem(lruKey); delete this.memQueue.keys[lruKey]; for (var i = 0; i < this.memQueue.objs.length; i++) { var _o = this.memQueue.objs[i]; if(_o.key == lruKey){ this.memQueue.objs.splice(i,1); break; } } } } } this.localStorage[key] = value; //当前的key，也必须lru一下 this.LRU(key); //lru结束 this.localStorage.setItem('LRUConfig', JSON.stringify(this.memQueue)); } }, /* * 近期最少使用算法 */ LRU: function(key) { var memQueue = this.memQueue; if (typeof memQueue.objs != 'undefined') { var _o = memQueue.objs; //开始计算那个要淘汰的key， //就是那个times最大的，如果times最大的有几个 //则返回那个time最小的 var isIn = false; for (var i = 0, len = _o.length; i < len; i++) { _o[i].times = (key == _o[i].key) ? 0 : _o[i].times + 1; _o[i].time = (key == _o[i].key) ? (new Date()).getTime() : _o[i].time; if(key == _o[i].key && false == isIn){ isIn = true; } } // 如果 if(false == isIn){ var _to = { 'key': key, 'times': 0, 'time': (new Date()).getTime(), 'life': (new Date()).getTime() }; this.memQueue.keys[key] = _to; this.memQueue.objs.push(_to); } _o.sort(function(f, s) { //按times降序排列。 if (f.times < s.times) { return 1; } else if (f.times > s.times) { return -1; } else { //开始比较time //按time，时间升序排列 if (f.time < s.time) { return -1; } else { return 1; } } }); } else { this.memQueue.objs = []; this.memQueue.keys = {}; var _to = { 'key': key, 'times': 0, 'time': (new Date()).getTime(), 'life': (new Date()).getTime() }; this.memQueue.keys[key] = _to; this.memQueue.objs.push(_to); return null; } }, /* * 读取需要淘汰的一项 */ getLRU: function() { var _o = this.memQueue.objs; if (_o) { return (_o.length >= this.config.size) ? _o.shift().key : null; } return null; } }); return { 'cache': Cache }; });
使用方法
var cache = require('cache'); // set 值 cache.Cache.set('ip', '你自己的一个url', value); // get值 cache.Cache.get('ip')
【总结JavaScript三种数据存储方式之间的区别】相关文章：
★ JavaScript正则表达式之multiline属性的应用
★ javascript嵌套函数和在函数内调用外部函数的区别分析
★ 介绍JavaScript中Math.abs()方法的使用
★ 简介JavaScript中toTimeString()方法的使用