亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

常見(jiàn)的瀏覽器存儲(chǔ)方式(cookie、localStorage、sessionStorage)

 更新時(shí)間:2019年05月07日 14:59:29   作者:喵小Q  
今天我們從前端的角度了解一下瀏覽器存儲(chǔ),我們常見(jiàn)且常用的存儲(chǔ)方式主要由兩種:cookie、webStorage(localStorage和sessionStorage)。本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧

今天我們從前端的角度了解一下瀏覽器存儲(chǔ),我們常見(jiàn)且常用的存儲(chǔ)方式主要由兩種:cookie、webStorage(localStorage和sessionStorage)。下面我們來(lái)一一認(rèn)識(shí)它們。

Cookie基于HTTP規(guī)范,用來(lái)識(shí)別用戶(hù)。

Cookie是服務(wù)器發(fā)送到瀏覽器的一小段數(shù)據(jù),會(huì)在瀏覽器下次向同一服務(wù)器再發(fā)起請(qǐng)求時(shí)被攜帶并發(fā)送到服務(wù)器上。

Cookie誕生之初的作用就是解決HTTP的無(wú)狀態(tài)請(qǐng)求,用來(lái)記錄一些用戶(hù)相關(guān)的一些狀態(tài)。

•會(huì)話(huà)狀態(tài)管理(如用戶(hù)登錄狀態(tài)、購(gòu)物車(chē)、游戲分?jǐn)?shù)或其它需要記錄的信息)
•個(gè)性化設(shè)置(如用戶(hù)自定義設(shè)置、主題等)
•瀏覽器行為跟蹤(如跟蹤分析用戶(hù)行為等)

因?yàn)橐恍┣岸私换サ男枰?,后?lái)cookie也被用于存儲(chǔ)一些客戶(hù)端的數(shù)據(jù)。

Cookie的原生api不友好,需要自行封裝一下。下面是封裝后的方法。

創(chuàng)建cookie

/**
* @description js原生設(shè)置cookie
* @param {String} name 給你要設(shè)置的cookie起個(gè)名字(key)
* @param {String} value cookie的具體內(nèi)容(value)
* @param {String} expiredays 設(shè)置cookie的過(guò)期時(shí)間,單位:天
*/
function setCookie(name, value, expiredays) {
var exdate=new Date();
exdate.setDate(exdate.getDate() + expiredays);
document.cookie = name + '=' + escape(value)+ ((expiredays == null) ? '' : ';expires=' +exdate.toGMTString());
}

獲取cookie

/**
* @description js原生獲取cookie方法1
* @param {String} name 你要獲取的cookie名
*/
function getCookie(name) {
  if (document.cookie.length > 0) {
    var start = document.cookie.indexOf(name + '=');
    if (start !== -1) {
      start = start + name.length + 1;
      var end = document.cookie.indexOf(';', start);
      if (end === -1) {
        end = document.cookie.length;
        return unescape(document.cookie.substring(start, end));
      }
   }
  }
  return '';
}

/**
* @description js原生獲取cookie方法2
* @param {String} name 你要獲取的cookie名
*/
function getCookie(name) {
  var cookieArr = document.cookie.split(';') || [];
  if(!cookieArr.length){
    return '';
  }
  for(var i = 0; i < cookieArr.length; i ++){
    var key = $.trim(cookieArr[i]).split('=')[0];
    var value = $.trim(cookieArr[i]).split('=')[1];
    if(key === name){
      return value;
    }
  }
}

檢查cookie是否已存在

function checkCookie() {
  username = getCookie('username');
  if (username !== null && username !== '') {
    alert('Welcome again ' + username + '!');
  } else {
    username = prompt('Please enter your name:', '');
    if (username !== null && username !== '') {
      setCookie('username',username,365);
    }
  }
}

jquery.cookie.js封裝的cookie設(shè)置方法:

創(chuàng)建cookie

/**
* 'name', cookie命名
* 'value',cookie的值
* {
*   expires: 7, // cookie有效期,單位天;默認(rèn)值:會(huì)話(huà)cookie,關(guān)閉瀏覽器cookie失效。
*   path: '/', // cookie影響到的路徑;值為'/',表示設(shè)置cookie在整個(gè)域中可用;默認(rèn)值:創(chuàng)建cookie的頁(yè)面路徑。
*   domain: 'example.com', // 定義cookie有效的域。默認(rèn)值:創(chuàng)建cookie的頁(yè)面域。
*   secure: false, // 定義cookie安全性,默認(rèn)值:false,設(shè)置為true,則cookie在http中是無(wú)效的,cookie的傳輸需要使用安全協(xié)議(https)。
* }
*/
$.cookie('name', 'value', { expires: 7, path: '/', domain: 'example.com', secure: false});

讀取cookie

$.cookie('name'); //name存在返回對(duì)應(yīng)value,不存在返回null

讀取所有可用的cookies:

$.cookie(); //{'name': value}

TODO:直接調(diào)用會(huì)報(bào)錯(cuò)?

刪除cookie

//成功刪除cookie時(shí)返回true,否則返回false
$.removeCookie('name'); // => true
$.removeCookie('nothing'); // => false

注意:刪除cookie時(shí),必須傳遞用于設(shè)置cookie的完全相同的路徑,域和安全選項(xiàng),除非您依賴(lài)于默認(rèn)選項(xiàng)。

即:設(shè)置cookie時(shí)如果設(shè)置了path屬性或secure屬性,刪除的時(shí)候要帶著這些屬性,否則無(wú)法成功刪除cookie。

// This won't work!
$.removeCookie('name'); // => false
// This will work!
$.removeCookie('name', { path: '/' }); // => true
TODO:$.removeCookie無(wú)效?

(jquery1.9.1.js + jquery.cookie.js,插件無(wú)重復(fù)引用的情況,$.removeCookie提示undefined)

webStorage基于HTML5規(guī)范

HTML5 提供了兩種在客戶(hù)端存儲(chǔ)數(shù)據(jù)的新方法:localStorage和sessionStorage,掛載在window對(duì)象下。

webStorage是本地存儲(chǔ),數(shù)據(jù)不是由服務(wù)器請(qǐng)求傳遞的。從而它可以存儲(chǔ)大量的數(shù)據(jù),而不影響網(wǎng)站的性能。

Web Storage的目的是為了克服由cookie帶來(lái)的一些限制,當(dāng)數(shù)據(jù)需要被嚴(yán)格控制在客戶(hù)端上時(shí),無(wú)須持續(xù)地將數(shù)據(jù)發(fā)回服務(wù)器。比如客戶(hù)端需要保存的一些用戶(hù)行為或數(shù)據(jù),或從接口獲取的一些短期內(nèi)不會(huì)更新的數(shù)據(jù),我們就可以利用Web Storage來(lái)存儲(chǔ)。

localStorage的生命周期是永久性的。localStorage存儲(chǔ)的數(shù)據(jù),即使關(guān)閉瀏覽器,也不會(huì)讓數(shù)據(jù)消失,除非主動(dòng)的去刪除數(shù)據(jù)。如果 想設(shè)置失效時(shí)間,需自行封裝。

sessionStorage 的生命周期是在瀏覽器關(guān)閉前。

  特性:

•關(guān)閉瀏覽器sessionStorage 失效;
•頁(yè)面刷新不會(huì)消除數(shù)據(jù);
•只有在當(dāng)前頁(yè)面打開(kāi)的鏈接,才可以訪(fǎng)sessionStorage的數(shù)據(jù),使用window.open打開(kāi)頁(yè)面和改變localtion.href方式都可以獲 取到

sessionStorage內(nèi)部的數(shù)據(jù);

存儲(chǔ)方式

作用與特性

存儲(chǔ)數(shù)量及大小

api

cookie

● 存儲(chǔ)用戶(hù)信息,獲取數(shù)據(jù)需要與服務(wù)器建立連接。

● 可存儲(chǔ)的數(shù)據(jù)有限,且依賴(lài)于服務(wù)器,無(wú)需請(qǐng)求服務(wù)器的數(shù)據(jù)盡量不要存放在cookie中,以免影響頁(yè)面性能。

● 可設(shè)置過(guò)期時(shí)間。

● 最好將cookie控制在4095B以?xún)?nèi),超出的數(shù)據(jù)會(huì)被忽略。

● IE6或更低版本最多存20個(gè)cookie; IE7及以上版本最多可以有50個(gè);Firefox最多50個(gè);chrome和Safari沒(méi)有做硬性限制。

原生、$.cookie(詳見(jiàn)上文)

localStorage

● 存儲(chǔ)客戶(hù)端信息,無(wú)需請(qǐng)求服務(wù)器。

● 數(shù)據(jù)永久保存,除非用戶(hù)手動(dòng)清理客戶(hù)端緩存。

● 開(kāi)發(fā)者可自行封裝一個(gè)方法,設(shè)置失效時(shí)間。

 

5M左右,各瀏覽器的存儲(chǔ)空間有差異。(感興趣的同學(xué)可以自己試一下)。

// 保存數(shù)據(jù)到 localStorage

localStorage.setItem('key', 'value');

// 從 localStorage 獲取數(shù)據(jù)

let data = localStorage.getItem('key');

// 從 localStorage 刪除保存的數(shù)據(jù)

localStorage.removeItem('key');

// 從 localStorage 刪除所有保存的數(shù)據(jù)

localStorage.clear();

sessionStorage

● 存儲(chǔ)客戶(hù)端信息,無(wú)需請(qǐng)求服務(wù)器。

● 數(shù)據(jù)保存在當(dāng)前會(huì)話(huà),刷新頁(yè)面數(shù)據(jù)不會(huì)被清除,結(jié)束會(huì)話(huà)(關(guān)閉瀏覽器、關(guān)閉頁(yè)面、跳轉(zhuǎn)頁(yè)面)數(shù)據(jù)失效。

 

同localStorage

// 保存數(shù)據(jù)到 sessionStorage

sessionStorage.setItem('key', 'value');

// 從 sessionStorage 獲取數(shù)據(jù)

let data = sessionStorage.getItem('key');

// 從 sessionStorage 刪除保存的數(shù)據(jù)

sessionStorage.removeItem('key');

// 從 sessionStorage 刪除所有保存的數(shù)據(jù)

sessionStorage.clear();

總結(jié):

以上所述是小編給大家介紹的常見(jiàn)的瀏覽器存儲(chǔ)方式(cookie、localStorage、sessionStorage),希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)歡迎給我留言,小編會(huì)及時(shí)回復(fù)大家的!

相關(guān)文章

最新評(píng)論