您現在的位置是:電腦技術吧?>? 基礎知識 ??>??html cookie,html使用cookie??>??正文詳情

html cookie,html使用cookie

巴向露2019-11-26 12:01:29 人圍觀
簡介js使用cookie背景讓我們先來看看各種本地存儲的變化:cookies:瀏覽器支持,容量為4kbuserdata:only supported by ie,容量為64kbflasjs怎么使用cookie

背景先看看各種本地存儲的變革:Cookies:瀏覽器均支持,容量為4KBUserData:僅IE支持,容量為64KBFlash:100KBGoogle Gears SQLite :需要插件支持,容量無限制LocalStorage:HTML5,容量為5M現準備在項目中試圖取代cookie的實現,基本分析如下:每次和服務器端進行交互,cookie都會在請求中被攜帶,cookie過多,也造成帶寬的浪費cookie的容量很小,或許無法滿足當今互聯網的本地存儲需求在IE8 、Firefox3.0 、Opera10.5 、Chrome4.0 、Safari4.0 、iPhone2.0 、Andrioid2.0 等平臺下,已經完全支持HTML5的LocalStorage在IE7即以下版本中,可以使用UserData來代替cookie,而且同樣比cookie保險用戶可能清cookie,但不見得知道去清UserData或者LocalStorage,這也增強了一道代碼保險到底用啥來取代?

UserData:僅IE可用Flash:存儲空間夠了,也還挺好,可這玩意兒不是HTML原生的Google Gears:存儲空間沒啥限制,就是得裝額外的插件HTML5-LocalStorage:官方建議每個站點可以本地存儲5M的內容,非常大了最后再分析一下現在咱們針對的瀏覽器:IE系列、FF、Chrome、Safari、Opera,外加雙核的遨游、QQ瀏覽器、搜狗瀏覽器其中,現在的FF、Chrome、Safari、Opera已經完全支持HTML5-LocalStorage雙核的那些個瀏覽器,要么Webkit內核,要么IE內核(大多都是IE8的內核了),所以這些也是支持HTML5-LocalStorage的最后就剩IE7及其以下版本,對于專門的IE,就用它們自家提供的UserData了,處理很方便總結:用UserData和HTML5-LocalStorage結合的方式,來取代cookie!UserData的存儲情況:2011-03-23_201627.pngUserData行為通過將數據寫入一個UserData存儲區(UserData store)來保存數據,userData可以將數據以XML格式保存在客戶端計算機上。

該數據將一直存在,除非你人為刪除或者用腳本設置了該數據的失效期。

從上面的表格可以看出,就算是一個受限(Restricted)的站點,單個文檔也能存64KB的數據,整個Domain也能裝得下640KB的東西。

要了解更多UserData的東西,可以點擊這里關于Expires我們都知道,采用cookie來進行本地數據緩存,可以設定一個生命周期,在IE中采用UserData進行替代,能完美的實現。

但是對于HTML5提供的LocalStorage則沒有提供現成的API,來設置某本地存儲的生命周期,只能采取一些極端的手段進行模擬實現。

關于數據的批量存儲、提取、刪除一個好用的組件庫,應該提供更加便捷的API,原生的cookie、UserData、LocalStorage都沒有提供現成的接口可調用,所以,在這里,我們來包裝一個,使其擁有這樣的批量接口。

代碼實現1、IE中的UserData實現原理很簡單,就是創建一個HTML節點,為其增加一個行為(behavior):#default#userData,把待存儲的數據放到該節點的屬性上(setAttribute),再保存到本地即可(save)。

創建html實例:/*** 創建并獲取這個input:hidden實例* @return {HTMLInputElement} input:hidden實例* @private*/function _getInstance(){ //把UserData綁定到input:hidden上 var _input = null; //是的,不要驚訝,這里每次都會創建一個input:hidden并增加到DOM樹種 //目的是避免數據被重復寫入,提早造成磁盤空間寫滿的Exception _input = document.createElement(input); _input.type = hidden; _input.addBehavior(#default#userData); document.body.appendChild(_input); return _input;}本地數據存儲:/*** 將數據通過UserData的方式保存到本地,文件名為:文件名為:config.key[1].xml* @param {String} key 待存儲數據的key,和config參數中的key是一樣的* @param {Object} config 待存儲數據相關配置* @cofnig {String} key 待存儲數據的key* @config {String} value 待存儲數據的內容* @config {String|Object} [expires] 數據的過期時間,可以是數字,單位是毫秒;也可以是日期對象,表示過期時間* @private*/function __setItem(key,config){ try { var input = _getInstance(); //創建一個Storage對象 var storageInfo = config || {}; //設置過期時間 if(storageInfo.expires) { var expires; //如果設置項里的expires為數字,則表示數據的能存活的毫秒數 if ('number' == typeof storageInfo.expires) { expires = new Date(); expires.setTime(expires.getTime() storageInfo.expires); } input.expires = expires.toUTCString(); } //存儲數據 input.setAttribute(storageInfo.key,storageInfo.value); //存儲到本地文件,文件名為:storageInfo.key[1].xml input.save(storageInfo.key); }catch(e) { }}再看userData本地數據的讀取:/*** 提取本地存儲的數據* @param {String} config 待獲取的存儲數據相關配置* @cofnig {String} key 待獲取的數據的key* @return {String} 本地存儲的數據,獲取不到時返回null* @example* qext.LocalStorage.get({* key : username* });* @private*/function _getItem(config){ try { var input = _getInstance(); //載入本地文件,文件名為:config.key[1].xml input.load(config.key); //取得數據 return input.getAttribute(config.key) || null; } catch (e) { return null; }}模擬remove操作:/*** 移除某項存儲數據* @param {Object} config 配置參數* @cofnig {String} key 待存儲數據的key* @private*/function _removeItem(config){ try { var input = _getInstance(); //載入存儲區塊 input.load(config.key); //移除配置項 input.removeAttribute(config.key); //強制使其過期 var expires = new Date(); expires.setTime(expires.getTime() - 1); input.expires = expires.toUTCString(); input.save(config.key); //從allkey中刪除當前key //下面的代碼用來記錄當前保存的key,便于以后clearAll var result = _getItem({key : _clearAllKey}); if(result) { result = result.replace(new RegExp((^||) config.key (||$),'g'),''); result = { key : _clearAllKey, value : result }; //保存鍵 __setItem(_clearAllKey,result); } } catch (e) { }}2、再看HTML5-LocalStorage中expires的模擬:在進行數據存儲的時候,單獨多存一個字段:key .expires,如果傳入的expires為數字類型,單位則是毫秒(ms)window.localStorage.setItem(storageInfo.key,storageInfo.value);// 如果需要指定生命周期if(config.expires) { var expires; //如果設置項里的expires為數字,則表示數據的能存活的毫秒數 if ('number' == typeof storageInfo.expires) { expires = new Date(); expires.setTime(expires.getTime() storageInfo.expires); } window.localStorage.setItem(storageInfo.key .expires,expires);}在數據讀取的時候,通用讀取這個字段,判斷時間是否超出了生命周期result = window.localStorage.getItem(config.key);//過期時間判斷,如果過期了,則移除該項if(result) { var expires = window.localStorage.getItem(config.key .expires); result = { value : result, expires : expires ? new Date(expires) : null }; if(result result.expires result.expires new Date()) { result = null; window.localStorage.removeItem(config.key); }}3、提取所有key/*** 獲取所有的本地存儲數據對應的key* precode* var keys = qext.LocalStorage.getAllKeys();* /code/pre* @return {Array} 所有的key*/getAllKeys : function(){ var result = []; //支持本地存儲的瀏覽器:IE8 、Firefox3.0 、Opera10.5 、Chrome4.0 、Safari4.0 、iPhone2.0 、Andrioid2.0 if(_isSupportLocalStorage) { var key; for(var i = 0,len = window.localStorage.length;i len;i ){ key = window.localStorage.key(i); if(!/. .expires$/.test(key)) { result.push(key); } } } else if(_isSupportUserData) { //IE7及以下版本,采用UserData方式 result = _getAllKeys(); } return result;}4、清除所有本地存儲的數據/*** 清除所有本地存儲的數據* precode* qext.LocalStorage.clearAll();* /code/pre*/clearAll : function(){ //支持本地存儲的瀏覽器:IE8 、Firefox3.0 、Opera10.5 、Chrome4.0 、Safari4.0 、iPhone2.0 、Andrioid2.0 if(_isSupportLocalStorage) { window.localStorage.clear(); } else if(_isSupportUserData) { //IE7及以下版本,采用UserData方式 _clearAll(); }}關于使用方法1、數據存儲:qext.LocalStorage.set// 保存單個對象到本地qext.LocalStorage.set({ key : username, value : baiduie, expires : 3600 * 1000 /*單位:ms*/});// 保存多個對象qext.LocalStorage.set([{ key : username, value : baiduie, expires : 3600 * 1000 /*單位:ms*/},{ key : password, value : zxlie, expires : 3600 * 1000 /*單位:ms*/}]);2、數據提取:qext.LocalStorage.get//獲取某一個本地存儲,返回值為:{key:,value:,expires:},未取到值時返回值為:nullvar rst = qext.LocalStorage.get({ key : username});//獲取多個本地存儲,返回值為:[,,],未取到值時返回值為:[null,null,null]qext.LocalStorage.get([{ key : username},{ key : password},{ key : sex}]);3、數據刪除:qext.LocalStorage.remove//刪除一個本地存儲項qext.LocalStorage.remove({ key : username});//刪除多個本地存儲項目qext.LocalStorage.remove([{ key : username},{ key : password},{ key : sex}]);4、清空所有數據:qext.LocalStorage.clearAll// 清空所有本地存儲的數據qext.LocalStorage.clearAll();5、獲取所有本地存儲的key:qext.LocalStorage.getAllKes// 獲取所有本地存儲的keyvar keys = qext.LocalStorage.getAllKeys();

版權聲明:本文由 巴向露 整理編輯。

原標題:html5存cookie,html去除cookie

轉載注明出處:http://www.dn9ww09s.icu/basics/14444.html

文章評論

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

    用戶名:

    驗證碼:

作者推薦

  • 怎么做ppt母版詳細步驟,ppt怎么生成母版

    怎么做ppt母版詳細步驟,ppt怎么生成母版 相關圖片如何運用幻燈片母版Ppt一直是辦公軟件中一種流行的辦公軟件。當然,PPT的使用率極高。了解一些PPT使用技巧可以幫助我們提高工作效率。所以今天,超人編輯將介紹如何讓ppt掌握PP如何...

  • 滬江開心詞場如何破解,滬江開心詞場怎么賺滬元

    滬江開心詞場如何破解,滬江開心詞場怎么賺滬元 相關圖片滬江開心詞場不要拼寫題最近,湖江快樂詞壇有很多用戶不知道如何登錄。所以今天,超人軟件編輯想在湖江快樂詞壇的課程中介紹一下iPhone的招牌,希望對大家有所幫助!湖江快樂詞...

  • 一帶一路的認識,談談你如何認識一帶路戰略

    一帶一路的認識,談談你如何認識一帶路戰略 相關圖片剛認識了解HTML5的websocket。在HTML5規范中,我最喜歡的web技術是websocket API,它正在迅速流行起來。Websocket提供了一種流行的認識...

  • 乖巧 表情包,乖巧三連表情包

    乖巧 表情包,乖巧三連表情包 相關圖片哼表情包你厭倦了看你每天使用的表情包嗎?超人小編是一個沒有表情包的小高手,聊天的時候感覺很空虛,今天我將分享一組可愛的表情包高清圖片下載和跪下智能表情包嘻嘻表情包...

  • 晶瑩剔透還是晶瑩剔透,晶瑩剔透的露珠

    晶瑩剔透還是晶瑩剔透,晶瑩剔透的露珠 相關圖片晶瑩剔透的水珠像什么在最終效果的第一步中,隨意創建一個新畫布,用﹐000066填充背景色,用鋼筆繪制基本形狀,羽毛邊框(半徑1),填充放射性梯度,并在濾光片外添加燈光。效果...

  • 借條app,360借條app

    借條app,360借條app 相關圖片三六零借條360借記券是360公司即將推出的一款金融借貸產品。是一個利息合理、操作快捷安全的正規借貸平臺。那么如何開通360貸款呢?如果你想開通360貸款,請來看看超人編類似360借...

  • 在dreamweavercs6中,dreamweavercs6安裝

    在dreamweavercs6中,dreamweavercs6安裝 相關圖片dreamweaver一。指定方法1的代碼。代碼指定方法是指直接在頁面的HTML代碼中設置背景音樂。在現實中,通常使用標簽來實現標簽的語法格式如下:SRC:背景音樂文件地址;loopcs6...

  • 摩拜單車,摩拜單車怎么用

    摩拜單車,摩拜單車怎么用 相關圖片摩拜單車月卡近日,摩比摩比摩比摩比摩比摩比摩比摩比摩比摩比摩比摩比摩比摩比摩比摩比摩比摩比摩比摩比摩比摩比摩比摩比摩比摩比摩比摩比摩比摩比摩比摩比摩比摩比摩比摩比...

  • 進程ID,進程ID是什么

    進程ID,進程ID是什么 相關圖片獲得進程ID的用戶名本文主要介紹了在shell腳本中獲取進程ID的方法。我想知道運行腳本中的子shell的進程ID。如何在shell腳本中獲取PID?讀這篇文章找出你想要的答案。如linux看進程id...

  • 樂視2內存不足怎么辦,樂視X60內存不足怎么辦

    樂視2內存不足怎么辦,樂視X60內存不足怎么辦 相關圖片樂視手機運行內存不足當我們安裝軟件時,常常會想起內存不足。手機內存不足時,微信聊天甚至看不到表情包。如何解決樂視手機內存不足的問題?今日超人編輯帶來樂視手機用戶內...

熱評文章

  • 拼多多怎么看買家信息,拼多多買家賬號哪里看

    拼多多怎么看買家信息,拼多多買家賬號哪里看 相關圖片拼多多怎么看賣家是哪里的當我們在網上購買商品時,查看評論是非常重要的。我們可以通過評論來判斷商店的東西是否與描述相符,生意是否誠實等等。平多多怎么看不到買家的評價...

  • html虛線分割線,dw怎么做圖文混排

    html虛線分割線,dw怎么做圖文混排 相關圖片dreamweaver怎么用打開你網站的主頁,我是index.html,在這里找到菜單欄上的修改,點擊如下圖所示,然后點擊頁面屬性,用鼠標點擊頁面屬性中的外觀-----瀏覽并打開頁面,找到dreamweaver可...

  • 可以導入本地書籍的讀書軟件,微信讀書可以導入本地書籍嗎

    可以導入本地書籍的讀書軟件,微信讀書可以導入本地書籍嗎 相關圖片書源導入起點閱讀應用不僅可以讓用戶閱讀起點以上的海量優質文章,還可以讓用戶將本地圖書導入起點閱讀進行閱讀。那么,如何從起點閱讀引進本土圖書呢?今天,超人編輯將為您...

  • Win10安全模式,win安全模式

    Win10安全模式,win安全模式 相關圖片win安全模式怎么進安全模式是Windows操作系統中的一種特殊模式。其工作原理是在不加載第三方設備驅動程序的情況下啟動計算機,使計算機以系統的最小模式運行,使用戶能夠方便地檢...

  • 簡寫,7月簡寫

    簡寫,7月簡寫 相關圖片6月英語簡寫CSS速記是指將多行CSS屬性速記成一行,也稱為CSS代碼優化或CSS縮寫。CSS速記的最大優點是它可以顯著減小CSS文件的大小,優化網站的整體性能,并使其更易左右英文簡寫...

  • 怎么釋放電腦內存空間,如何清理電腦內存

    怎么釋放電腦內存空間,如何清理電腦內存 相關圖片如何深度清理電腦內存與手機一樣,電腦將使用越來越多的內存,運行速度也會越來越慢。今天,超人編輯介紹如何更好更快地清理電腦垃圾,增加電腦內存空間。讓我們來看看超人小...

  • 透明網頁,網頁能不能是透明的

    透明網頁,網頁能不能是透明的 相關圖片透明大頁面當我們在網頁中插入flash時,有時我們需要將其設置為透明,有時我們需要在flash的背面插入一些漂亮的圖片,并將它們與漂亮的效果相匹配。讓我們介紹一些將fla空間透明背...

  • 哈羅單車如何還車,單車怎么還車

    哈羅單車如何還車,單車怎么還車 相關圖片共享單車怎么還車步驟現在越來越多的人會用小明自行車來解決最后一公里的問題。那么小明自行車怎么能回來呢?接下來,超人軟件編輯將為您介紹iPhone版的小明自行車。讓我們看看...

  • 發光特效,發光的特效是什么軟件

    發光特效,發光的特效是什么軟件 相關圖片pr發光特效最終渲染:步驟1:繪制一個圓開始焰火-將背景設置為黑色并在畫布中繪制一個圓步驟2:在圖像圓內添加徑向漸變。梯度法選擇徑向,顏色填充值為××000000-××ffae物體發光特...

  • 怎么將html轉換為word,html怎么轉換成word

    怎么將html轉換為word,html怎么轉換成word 相關圖片word批量轉換html我以前教過你如何將PDF轉換成word、Excel或PPT今天的超人編輯想教你如何將word轉換成HTML。這不奇怪嗎?事實上,把word轉換成PDF并不難,不html生成word...

關注微信

变脸官网查询