您現在的位置是:電腦技術吧?>? 故障問題 ??>??storage,Localstorage??>??正文詳情

storage,Localstorage

葷貞怡2019-11-30 16:11:57 人圍觀
簡介讀取localstorage本文主要介紹在HTML5中使用本地存儲的教程。本地存儲用于瀏覽器和系統之間交互的本地傳出。您可以參考幾天前的本地存儲,發現在舊項目中操作cookie很奇怪。咨詢local

這篇文章主要介紹了HTML5中Localstorage的使用教程,Localstorage被用于瀏覽器和系統交互的本地傳出,需要的朋友可以參考下  什么是localstorage  前幾天在老項目中發現有對cookie的操作覺得很奇怪,咨詢下來是要緩存一些信息,以避免在URL上面傳遞參數,但沒有考慮過cookie會帶來什么問題:  ① cookie大小限制在4k左右,不適合存業務數據  ② cookie每次隨HTTP事務一起發送,浪費帶寬  我們是做移動項目的,所以這里真實適合使用的技術是localstorage,localstorage可以說是對cookie的優化,使用它可以方便在客戶端存儲數據,并且不會隨著HTTP傳輸,但也不是沒有問題:  ① localstorage大小限制在500萬字符左右,各個瀏覽器不一致  ② localstorage在隱私模式下不可讀取  ③ localstorage本質是在讀寫文件,數據多的話會比較卡(firefox會一次性將數據導入內存,想想就覺得嚇人啊)  ④ localstorage不能被爬蟲爬取,不要用它完全取代URL傳參  瑕不掩瑜,以上問題皆可避免,所以我們的關注點應該放在如何使用localstorage上,并且是如何正確使用。

  localstorage的使用    基礎知識  localstorage存儲對象分為兩種:  ① sessionStrage: session即會話的意思,在這里的session是指用戶瀏覽某個網站時,從進入網站到關閉網站這個時間段,session對象的有效期就只有這么長。

  ② localStorage: 將數據保存在客戶端硬件設備上,不管它是什么,意思就是下次打開計算機時候數據還在。

  兩者區別就是一個作為臨時保存,一個長期保存。

  這里來一段簡單的代碼說明其基本使用:  XML/HTML Code復制內容到剪貼板  XML/HTML Code復制內容到剪貼板

  1. div id=msg style=margin: 10px 0; border: 1px solid black; padding: 10px; width: 300px; height: 100px;
  2. /div input type=text id=text /
  3. select id=type option value=sessionsessionStorage/option
  4. option value=locallocalStorage/option /select
  5. button onclick=save(); 保存數據/button
  6. button onclick=load(); 讀取數據/button
  7. script type=text/javascript var msg = document.getElementById('msg'),
  8. text = document.getElementById('text'), type = document.getElementById('type');
  9. function save() {
  10. var str = text.value; var t = type.value;
  11. if (t == 'session') { sessionStorage.setItem('msg', str);
  12. } else { localStorage.setItem('msg', str);
  13. } }
  14. function load() {
  15. var t = type.value; if (t == 'session') {
  16. msg.innerHTML = sessionStorage.getItem('msg'); } else {
  17. msg.innerHTML = localStorage.getItem('msg'); }
  18. } /script
  真實場景  實際工作中對localstorage的使用一般有以下需求:  ① 緩存一般信息,如搜索頁的出發城市,達到城市,非實時定位信息  ② 緩存城市列表數據,這個數據往往比較大  ③ 每條緩存信息需要可追蹤,比如服務器通知城市數據更新,這個時候在最近一次訪問的時候要自動設置過期  ④ 每條信息具有過期日期狀態,在過期外時間需要由服務器拉取數據  XML/HTML Code復制內容到剪貼板  define([], function () {  var Storage = _.inherit({  //默認屬性  propertys: function () {  //代理對象,默認為localstorage  this.sProxy = window.localStorage;  //60 * 60 * 24 * 30 * 1000 ms ==30天  this.defaultLifeTime = 2592000000;  //本地緩存用以存放所有localstorage鍵值與過期日期的映射  this.keyCache = 'SYSTEM_KEY_TIMEOUT_MAP';  //當緩存容量已滿,每次刪除的緩存數  this.removeNum = 5;  },  assert: function () {  if (this.sProxy === null) {  throw 'not override sProxy property';  }  },  initialize: function (opts) {  this.propertys();  this.assert();  },  /*  新增localstorage  數據格式包括唯一鍵值,json字符串,過期日期,存入日期  sign 為格式化后的請求參數,用于同一請求不同參數時候返回新數據,比如列表為北京的城市,后切換為上海,會判斷tag不同而更新緩存數據,tag相當于簽名  每一鍵值只會緩存一條信息  */  set: function (key, value, timeout, sign) {  var _d = new Date();  //存入日期  var indate = _d.getTime();  //最終保存的數據  var entity = null;  if (!timeout) {  _d.setTime(_d.getTime() this.defaultLifeTime);  timeout = _d.getTime();  }  //  this.setKeyCache(key, timeout);  entity = this.buildStorageObj(value, indate, timeout, sign);  try {  this.sProxy.setItem(key, JSON.stringify(entity));  return true;  } catch (e) {  //localstorage寫滿時,全清掉  if (e.name == 'QuotaExceededError') {  // this.sProxy.clear();  //localstorage寫滿時,選擇離過期時間最近的數據刪除,這樣也會有些影響,但是感覺比全清除好些,如果緩存過多,此過程比較耗時,100ms以內  if (!this.removeLastCache()) throw '本次數據存儲量過大';  this.set(key, value, timeout, sign);  }  console console.log(e);  }  return false;  },  //刪除過期緩存  removeOverdueCache: function () {  var tmpObj = null, i, len;  var now = new Date().getTime();  //取出鍵值對  var cacheStr = this.sProxy.getItem(this.keyCache);  var cacheMap = [];  var newMap = [];  if (!cacheStr) {  return;  }  cacheMap = JSON.parse(cacheStr);  for (i = 0, len = cacheMap.length; i len; i ) {  tmpObj = cacheMap[i];  if (tmpObj.timeout now) {  this.sProxy.removeItem(tmpObj.key);  } else {  newMap.push(tmpObj);  }  }  this.sProxy.setItem(this.keyCache, JSON.stringify(newMap));  },  removeLastCache: function () {  var i, len;  var num = this.removeNum || 5;  //取出鍵值對  var cacheStr = this.sProxy.getItem(this.keyCache);  var cacheMap = [];  var delMap = [];  //說明本次存儲過大  if (!cacheStr) return false;  cacheMap.sort(function (a, b) {  return a.timeout - b.timeout;  });  //刪除了哪些數據  delMap = cacheMap.splice(0, num);  for (i = 0, len = delMap.length; i len; i ) {  this.sProxy.removeItem(delMap[i].key);  }  this.sProxy.setItem(this.keyCache, JSON.stringify(cacheMap));  return true;  },  setKeyCache: function (key, timeout) {  if (!key || !timeout || timeout new Date().getTime()) return;  var i, len, tmpObj;  //獲取當前已經緩存的鍵值字符串  var oldstr = this.sProxy.getItem(this.keyCache);  var oldMap = [];  //當前key是否已經存在  var flag = false;  var obj = {};  obj.key = key;  obj.timeout = timeout;  if (oldstr) {  oldMap = JSON.parse(oldstr);  if (!_.isArray(oldMap)) oldMap = [];  }  for (i = 0, len = oldMap.length; i len; i ) {  tmpObj = oldMap[i];  if (tmpObj.key == key) {  oldMap[i] = obj;  flag = true;  break;  }  }  if (!flag) oldMap.push(obj);  //最后將新數組放到緩存中  this.sProxy.setItem(this.keyCache, JSON.stringify(oldMap));  },  buildStorageObj: function (value, indate, timeout, sign) {  var obj = {  value: value,  timeout: timeout,  sign: sign,  indate: indate  };  return obj;  },  get: function (key, sign) {  var result, now = new Date().getTime();  try {  result = this.sProxy.getItem(key);  if (!result) return null;  result = JSON.parse(result);  //數據過期  if (result.timeout now) return null;  //需要驗證簽名  if (sign) {  if (sign === result.sign)  return result.value;  return null;  } else {  return result.value;  }  } catch (e) {  console console.log(e);  }  return null;  },  //獲取簽名  getSign: function (key) {  var result, sign = null;  try {  result = this.sProxy.getItem(key);  if (result) {  result = JSON.parse(result);  sign = result result.sign  }  } catch (e) {  console console.log(e);  }  return sign;  },  remove: function (key) {  return this.sProxy.removeItem(key);  },  clear: function () {  this.sProxy.clear();  }  });  Storage.getInstance = function () {  if (this.instance) {  return this.instance;  } else {  return this.instance = new this();  }  };  return Storage;  });  這段代碼包含了localstorage的基本操作,并且對以上問題做了處理,而真實的使用還要再抽象:  XML/HTML Code復制內容到剪貼板  define(['AbstractStorage'], function (AbstractStorage) {  var Store = _.inherit({  //默認屬性  propertys: function () {  //每個對象一定要具有存儲鍵,并且不能重復  this.key = null;  //默認一條數據的生命周期,S為秒,M為分,D為天  this.lifeTime = '30M';  //默認返回數據  // this.defaultData = null;  //代理對象,localstorage對象  this.sProxy = new AbstractStorage();  },  setOption: function (options) {  _.extend(this, options);  },  assert: function () {  if (this.key === null) {  throw 'not override key property';  }  if (this.sProxy === null) {  throw 'not override sProxy property';  }  },  initialize: function (opts) {  this.propertys();  this.setOption(opts);  this.assert();  },  _getLifeTime: function () {  var timeout = 0;  var str = this.lifeTime;  var unit = str.charAt(str.length - 1);  var num = str.substring(0, str.length - 1);  var Map = {  D: 86400,  H: 3600,  M: 60,  S: 1  };  if (typeof unit == 'string') {  unitunit = unit.toUpperCase();  }  timeout = num;  if (unit) timeout = Map[unit];  //單位為毫秒  return num * timeout * 1000 ;  },  //緩存數據  set: function (value, sign) {  //獲取過期時間  var timeout = new Date();  timeout.setTime(timeout.getTime() this._getLifeTime());  this.sProxy.set(this.key, value, timeout.getTime(), sign);  },  //設置單個屬性  setAttr: function (name, value, sign) {  var key, obj;  if (_.isObject(name)) {  for (key in name) {  if (name.hasOwnProperty(key)) this.setAttr(k, name[k], value);  }  return;  }  if (!sign) sign = this.getSign();  //獲取當前對象  obj = this.get(sign) || {};  if (!obj) return;  obj[name] = value;  this.set(obj, sign);  },  getSign: function () {  return this.sProxy.getSign(this.key);  },  remove: function () {  this.sProxy.remove(this.key);  },  removeAttr: function (attrName) {  var obj = this.get() || {};  if (obj[attrName]) {  delete obj[attrName];  }  this.set(obj);  },  get: function (sign) {  var result = [], isEmpty = true, a;  var obj = this.sProxy.get(this.key, sign);  var type = typeof obj;  var o = { 'string': true, 'number': true, 'boolean': true };  if (o[type]) return obj;  if (_.isArray(obj)) {  for (var i = 0, len = obj.length; i len; i ) {  result[i] = obj[i];  }  } else if (_.isObject(obj)) {  result = obj;  }  for (a in result) {  isEmpty = false;  break;  }  return !isEmpty ? result : null;  },  getAttr: function (attrName, tag) {  var obj = this.get(tag);  var attrVal = null;  if (obj) {  attrVal = obj[attrName];  }  return attrVal;  }  });  Store.getInstance = function () {  if (this.instance) {  return this.instance;  } else {  return this.instance = new this();  }  };  return Store;  });  我們真實使用的時候是使用store這個類操作localstorage,代碼結束簡單測試:

  存儲完成,以后都不會走請求,于是今天的代碼基本結束 ,最后在android Hybrid中有一后退按鈕,此按鈕一旦按下會回到上一個頁面,這個時候里面的localstorage可能會讀取失效!一個簡單不靠譜的解決方案是在webapp中加入:  XML/HTML Code復制內容到剪貼板  window.onunload = function () { };//適合單頁應用,不要問我為什么,我也不知道  結語  localstorage是移動開發必不可少的技術點,需要深入了解,具體業務代碼后續會放到git上,有興趣的朋友可以去了解

版權聲明:本文由 葷貞怡 整理編輯。

原標題:localstorage使用過多,使用localstorage

轉載注明出處:http://www.dn9ww09s.icu/fault/14952.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • div和section,section和div區別

    div和section,section和div區別 相關圖片用section導入表格當我第一次接觸HTML5時,我對它的標簽不太適應,甚至一度有點反感。尤其是對于div、section和article的標簽,它們應該在哪里使用還不清楚。divHdiv居中...

  • 被拋棄了,被拋棄的我

    被拋棄了,被拋棄的我 相關圖片被拋棄的痛苦不斷尋找新的替代技術,H5即將被拋棄?昨天,社交達人分享了一段“當H5警報響起時,我該怎么辦?”這似乎是H5危機的警報。W公司創始人李3水先生表示,W不會正式做感...

  • 有哪些表現手法,表現手法

    有哪些表現手法,表現手法 相關圖片表現手法和描寫手法亞非:近半年來,我一直負責霹靂戰機和天天庫寶項目,主要集中在品牌建設和創意營銷方面。我嘗試過手繪的形式,這次我會和大家分享我的設計經驗。雷霆鋒T...

  • 刷屏,怎樣刷屏

    刷屏,怎樣刷屏 相關圖片朋友圈刷屏一、三情(親情、愛情、友情)壽草先生的情書掃描二維碼查看詳情!在這部H5中,壽操并沒有選擇呈現太多的互動技巧,而是用大段的文案和黑白影像悄悄地告訴你一個男人...

  • 排行榜,TOP

    排行榜,TOP 相關圖片國內汽車品牌排行榜目前市場上有大量的HTML 5頁面模板制作工具,但對于很多非專業的設計師來說,制作html5頁面是非常方便的。但我不得不承認,大部分作品在模板工具平臺上依然停留...

  • 廣告H5,沒有廣告的h5

    廣告H5,沒有廣告的h5 相關圖片h5創意廣告你是否突然對市場上的H5麻木了,情況一樣,內容缺乏新意?你想做,但做不好。你不知道如何判斷工作的質量?我們在這個只有一年多的行業里遇到了什么困難?我們怎么對...

  • 決戰江湖各門派玩法,神武3門派玩法

    決戰江湖各門派玩法,神武3門派玩法 相關圖片神武3門派技能詳解作為近一年來最受歡迎的炸雞品種,H5經過一年的摸爬滾打(SE)體驗,不僅沒有氣喘吁吁,而且有許多新動作,在空中打出了新的高度。頂君一路追蹤,帶出兩個最酷...

  • 短暫的分開是為了更長久的,短暫的快樂長久的悲傷

    短暫的分開是為了更長久的,短暫的快樂長久的悲傷 相關圖片美好的時間總是短暫的中秋節快到了。你是高興回家過節,還是被迫在公司加班?作為廣告商,中秋節不僅是我們眼中的月餅,更是數不清的短暫卻不慌張!我聽說看了這組案子后,你...

  • 廣告H5,沒有廣告的h5

    廣告H5,沒有廣告的h5 相關圖片h5創意廣告以前,我做過很多關于H5的分享,但是它的定義和深度都很廣。從這個系列開始,我想從H5的定義開始,總結一下我所知道的關于H5的所有內容和設計方法!這是一件有意義的...

  • 標簽style,標簽內的style

    標簽style,標簽內的style 相關圖片style屬性值HTML樣式標記樣式標記—在文檔中聲明樣式時,標記樣式標記成對使用,以結束包含內容的屬性media--media type,type--type,通常使用typstyle...

熱評文章

  • h5有什么用,h5怎么用

    h5有什么用,h5怎么用 相關圖片h5是用來做什么的最近發現好多人喜歡將 HTML5 說成 h5,甚至是代指移動端的 Web Page 或者 WebApp。雖然說起來朗朗上口,但是小編真的不建議這樣來使用。  小h5用什么框架好...

  • 水晶櫻桃,水晶櫻桃簡介

    水晶櫻桃,水晶櫻桃簡介 相關圖片水晶櫻桃和黃蜜櫻桃很多朋友都討論過如何用煙花制作水晶櫻桃。本文教程將以圖片的形式解釋水晶櫻桃的制作,這將更清楚地傳達給每個學習者。以下是煙花制作水晶櫻桃的具體操作...

  • 最近新出平臺項目,新出投資項目大全

    最近新出平臺項目,新出投資項目大全 相關圖片項目拼出新速度12年前,無論布局多么復雜,擺在我們神奇的餐桌前都不是問題。十年前,Agie的網站重建為我們開啟了新的篇章。八年前,我們研究了雅虎網站,對它在IE5下的完美表現...

  • 文字環繞,文字環繞方式在哪

    文字環繞,文字環繞方式在哪 相關圖片如何設置文字環繞圖片有時我們可能需要做一些循環文字包裝。事實上,這種文本實際上是一種文本包裝路徑效果,但僅僅使用attach to path函數是無法實現的。仔細看一下:路徑周圍文四...

  • 組合路徑,路徑組合的步驟

    組合路徑,路徑組合的步驟 相關圖片怎么合并路徑焰火的一個特點是直接繪制矢量路徑。除了使用矢量工具(筆、矩形等幾何圖形)直接繪制矢量路徑外,還可以適當地使用組合路徑函數,使路徑的操作更加高效、省力。...

  • 生活中還有哪些是指南針,生活中什么可以做指南針

    生活中還有哪些是指南針,生活中什么可以做指南針 相關圖片指南針在生活中的應用有哪些本文介紹了在焰火中如何畫指南針。主要包括五個部分。首先用橢圓工具設置畫布大小,然后填充顏色,最后繪制圖案。下面是如何在焰火中繪制指南針:...

  • 創建紋理是什么意思,怎么做紋理

    創建紋理是什么意思,怎么做紋理 相關圖片從文件創建立方體紋理我們將在焰火中創建一個新文件,鍵入它,并選擇一個更大的字體大小以使其更有效。因為文本是白色的,所以我們將背景顏色設置為黃色以進行區分。文本也可...

  • 邊緣行為,如何邊緣控制

    邊緣行為,如何邊緣控制 相關圖片邊緣控制什么意思呀如何在沒有特殊濾鏡的情況下制作藝術照片或相框?讓我們來介紹一下如何處理焰火圖像邊緣的具體方法,并歡迎所有感興趣的同事學習。有很多方法可以做到這一...

  • 野棋子,自走棋前期強的棋子

    野棋子,自走棋前期強的棋子 相關圖片云頂之奕棋子攻擊距離焰火有多種圖案。如果能充分突出其圖案的紋理特征,就可以很容易地畫出各種圖形的逼真效果。接下來,我們將使用木紋3的陰影繪制一個逼真的棋子。開始焰火...

  • AI里為什么做矩形圓角的點出不來,ps怎么裁出圓角矩形

    AI里為什么做矩形圓角的點出不來,ps怎么裁出圓角矩形 相關圖片id如何畫出圓角矩形相信做網站的朋友一定知道煙花是一款圖像處理軟件。雖然它不如Photoshop強大,但它可以滿足網頁設計的需要。嗯,在今天的主題中,我經常在網頁上看到圓形矩形的...

關注微信

变脸官网查询