總結(jié)JavaScript三種數(shù)據(jù)存儲方式之間的區(qū)別
sessionStorage 、localStorage 和 cookie 之間的共同點:
都是保存在瀏覽器端,且同源的。
sessionStorage 、localStorage 和 cookie 之間的區(qū)別:
cookie數(shù)據(jù)始終在同源的http請求中攜帶(即使不需要),即cookie在瀏覽器和服務(wù)器間來回傳遞。而sessionStorage和localStorage不會自動把數(shù)據(jù)發(fā)給服務(wù)器,僅在本地保存。cookie數(shù)據(jù)還有路徑(path)的概念,可以限制cookie只屬于某個路徑下。
存儲大小限制也不同,cookie數(shù)據(jù)不能超過4k,同時因為每次http請求都會攜帶cookie,所以cookie只適合保存很小的數(shù)據(jù),如會話標(biāo)識。sessionStorage和localStorage 雖然也有存儲大小的限制,但比cookie大得多,可以達(dá)到5M或更大。
數(shù)據(jù)有效期不同,sessionStorage:僅在當(dāng)前瀏覽器窗口關(guān)閉前有效,自然也就不可能持久保持;localStorage:始終有效,窗口或瀏覽器關(guān)閉也一直保存,因此用作持久數(shù)據(jù);cookie只在設(shè)置的cookie過期時間之前一直有效,即使窗口或瀏覽器關(guān)閉。
作用域不同,sessionStorage不在不同的瀏覽器窗口中共享,即使是同一個頁面;localStorage 在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的。
Web Storage 支持事件通知機(jī)制,可以將數(shù)據(jù)更新的通知發(fā)送給監(jiān)聽者。
Web Storage 的 api 接口使用更方便。
封裝的localStorage的方法,可以控制存儲數(shù)據(jù)的條數(shù),以及時間
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 //一天的秒數(shù) 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算法結(jié)束。 var isFresh = true; var nowTime = (new Date()).getTime() / 1000; if(key in this.memQueue.keys){ var cacheTime = this.memQueue.keys[key].life / 1000; //如果過期時間超過 配置的lifeTime, //則清除掉當(dāng)前緩存 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(); //淘汰最近最少使用的這個。 //另外起一個方法讀取最符合淘汰的這個 //前提是當(dāng)前這個key,不在localStorage里面。 if (lruKey) { this.localStorage.removeItem(lruKey); } //開始設(shè)置一下這個值 //為了兼容性,用以下方法設(shè)置 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; //當(dāng)前的key,也必須lru一下 this.LRU(key); //lru結(jié)束 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')
相關(guān)文章
javascript cookie用法基礎(chǔ)教程(概念,設(shè)置,讀取及刪除)
這篇文章主要介紹了javascript cookie用法,結(jié)合實例形式總結(jié)分析了javascript中cookie的定義、特點及獲取、設(shè)置、刪除等基本操作技巧,需要的朋友可以參考下2016-09-09javascript函數(shù)中的arguments參數(shù)
arguments當(dāng)然只在function體內(nèi)才有意義, arguments.length 返回的是傳入function的實參個數(shù)2010-08-08使用 TypeScript 重新編寫的 JavaScript 坦克大戰(zhàn)游戲代碼
這篇文章主要介紹了使用 TypeScript 重新編寫的 JavaScript 坦克大戰(zhàn)游戲代碼,主要是對自己近期學(xué)習(xí)TypeScript的一個小小的總結(jié)實踐,推薦給小伙伴們,希望大家能夠喜歡。2015-04-04JavaScript中switch判斷容易犯錯的一個細(xì)節(jié)
這篇文章主要介紹了JavaScript中switch判斷容易犯錯的一個細(xì)節(jié),簡單說就是字符串和數(shù)字的差別,看完本文會有一個清晰的認(rèn)知,需要的朋友可以參考下2014-08-08Javascript中的數(shù)學(xué)函數(shù)集合
Javascript中的數(shù)學(xué)函數(shù)集合...2007-05-05溫故知新——JavaScript中的字符串連接問題最全總結(jié)(推薦)
這篇文章主要介紹了JS中的字符串連接問題,ECMAScript 中最常見的一個問題是字符串連接的性能。在調(diào)用 join() 方法時才會發(fā)生連接操作,具體操作步驟大家可查看下文的詳細(xì)講解,感興趣的小伙伴們可以參考一下。2017-08-08