摘要:存儲的三種方法和和之間的區別共同點都是保存在瀏覽器端,且同源的。而和不會自動把數據發給服務器,僅在本地保存。和雖然也有存儲大小的限制,但比大得多,可以達到或更大。支持事件通知機制,可以將數據更新的通知發送給監聽者。
javascript存儲的三種方法
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 接口使用更方便。
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")
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/85556.html
摘要:本地存儲的方案傳統把信息存儲到客戶端的瀏覽器中但是項目服務器端也是可以獲取的把信息存儲到服務器上的服務器存儲永久存儲在客服端的本地。 在客戶端運行的js是不能操作用戶電腦磁盤中的文件的(這是為了保護客戶端運行的安全)。 1、js中的本地存儲: 使用js向瀏覽器的某一個位置中存儲一些內容,瀏覽器即使關閉了,存儲的信息也不會銷毀,當在重新打開瀏覽器的時候我們依然可以獲取到上一次存儲的信息。...
一、本地存儲 1.1 了解本地存儲特性 1、數據存儲在用戶瀏覽器中 2、需要設置、讀取方便、甚至頁面刷新不丟失數據 3、容量大,sessionStorage約5M、localStorage約20M 4、只能存儲字符串,可以將對象JSON.stringify()編碼后存儲 1.2 window.sessionStorage 1、生命周期為關閉瀏覽器窗口 2、在用一個窗口頁面下數據...
摘要:是手機端關系型數據庫的最佳方案,各種手機都支持。但是目前手機端重量數據存儲的唯一可商用方案。是里最新的數據存儲規范,但不是基于,而是基于對象。與的標準相比,的擴展主要是為了跨域。有網友封裝了一個框架,針對數據,在超過時自動切換到,參考。 總結HTML5+的離線本地存儲的多種方案: [ √ ] HTML5標準方案:cookie、localstorage、sessionstorage、w...
摘要:是手機端關系型數據庫的最佳方案,各種手機都支持。但是目前手機端重量數據存儲的唯一可商用方案。是里最新的數據存儲規范,但不是基于,而是基于對象。與的標準相比,的擴展主要是為了跨域。有網友封裝了一個框架,針對數據,在超過時自動切換到,參考。 總結HTML5+的離線本地存儲的多種方案: [ √ ] HTML5標準方案:cookie、localstorage、sessionstorage、w...
摘要:離線檢測含義設備能否上網代碼注和,和最新的沒問題應用緩存緩存的目的是專門為網頁離線設計的,當然在在線情況也會緩存機制當用戶在地址輸入請求的地址去請求網頁時,瀏覽器會先本地緩存中查看是否有對應的緩存文件,如果有然后查看新鮮度就是是否過期了,如 23.1 離線檢測 含義:設備能否上網 代碼: navigator.onLine 注:IE6+和safari+5,firefox3+和ope...
閱讀 1264·2021-10-18 13:32
閱讀 2333·2021-09-24 09:47
閱讀 1323·2021-09-23 11:22
閱讀 2463·2019-08-30 14:06
閱讀 571·2019-08-30 12:48
閱讀 1997·2019-08-30 11:03
閱讀 535·2019-08-29 17:09
閱讀 2462·2019-08-29 14:10