欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript cookie原理及使用實(shí)例

 更新時(shí)間:2020年05月08日 10:08:29   作者:阿吉萊加雷  
這篇文章主要介紹了JavaScript cookie原理及使用實(shí)例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

什么是cookie?

cookie 是本地計(jì)算機(jī)的臨時(shí)存儲(chǔ)。

作用:在瀏覽器中進(jìn)行數(shù)據(jù)的存儲(chǔ),用戶名、密碼(比如:保存頁面信息,自動(dòng)登錄等)。

特點(diǎn):

  • cookie需要在服務(wù)器環(huán)境下運(yùn)行;
  • cookie的容量在4kb左右,限制為每個(gè)域名50個(gè)cookie個(gè)數(shù)(IE),不同瀏覽器容量和個(gè)數(shù)不同;
  • cookie以字符串類型存儲(chǔ),不同域名存儲(chǔ)的數(shù)據(jù)是無法共享;
  • cookie默認(rèn)是臨時(shí)存儲(chǔ)的,當(dāng)瀏覽器關(guān)閉時(shí),自動(dòng)銷毀;
  • cookie可以被禁用也可以刪除,且安全性不高。
  • 可以對cookie值進(jìn)行加密(MD5);

讀取和設(shè)置cookie

document.cookie = "user=123456";
console.log(document.cookie); //user=123456

使用f12查看當(dāng)前頁面存儲(chǔ)的cookie

注意:

在打開網(wǎng)址時(shí)或者提交表單時(shí)自動(dòng)裹挾著cookie數(shù)據(jù)發(fā)送到服務(wù)器,并且服務(wù)端程序可以 繼續(xù)裹挾著新的cookie內(nèi)容存儲(chǔ)在你的電腦的cookie中。

設(shè)置cookie的生存期

  格式:document.cookie = “名稱=值;expires=” + 時(shí)間;(時(shí)間必須是一個(gè)字符串)。

var date=new Date();
date.setHours(date.getHours()+1);//設(shè)置1小時(shí)的生存期
// document.cookie="a=3"; //先存入a=3,只運(yùn)行第一次
console.log(document.cookie);
var a=Number(document.cookie.split("=")[1]);
a++;
document.cookie="a="+a+";expires="+date.toUTCString();

  上面代碼表示:設(shè)置cookie在當(dāng)前時(shí)間的一個(gè)小時(shí)后過期,第一次運(yùn)行先存入a為3的值,然后把cookie的值從字符串轉(zhuǎn)為數(shù)值型,再進(jìn)行累加,每次設(shè)置生存期都要把data對象轉(zhuǎn)為字符串類型(toUTCString)。

在生存期內(nèi)的cookie,關(guān)閉頁面不會(huì)銷毀,生存期結(jié)束,關(guān)閉頁面銷毀cookie;

cookie存儲(chǔ)多個(gè)數(shù)據(jù)

var obj={
      user:"xietian",
      age:30,
      sex:"男"
    }
    function setCookie(obj,date){
      for(var prop in obj){
        document.cookie=prop+"="+obj[prop]+(date ? ";expires="+date.toUTCString() : "");
      }
    }
    var date=new Date();
    date.setFullYear(2021); 
    setCookie(obj,date);

使用reduce獲取多個(gè)cookie值

var o=getCookie();
   console.log(o);
    function getCookie(){
      return document.cookie.split("; ").reduce((value,item)=>{
          var arr=item.split("=");
          value[arr[0]]=isNaN(arr[1]) ? arr[1] : Number(arr[1]);//數(shù)字(年齡)需要轉(zhuǎn)為數(shù)值型
          return value;
      },{});
    }

關(guān)于cookie安全

  XSS攻擊:XSS攻擊通常指的是通過利用網(wǎng)頁開發(fā)時(shí)留下的漏洞,通過巧妙的方法注入惡意指令代碼到網(wǎng)頁,使用戶加載并執(zhí)行攻擊者惡意制造的網(wǎng)頁程序(百度百科)。

  XSS攻擊需要具備的條件:

1. 必須是同一個(gè)域當(dāng)中頁面的表單提交,必須有文本內(nèi)容提交

2. 提交的內(nèi)容需要被放置在頁面中,例如評論等內(nèi)容

3. 在提交的文本中出現(xiàn)script標(biāo)簽,并且這個(gè)標(biāo)簽沒有被替代,直接放入在頁面中

4. 這個(gè)頁面可以被所有用戶查看到

5. 這個(gè)script標(biāo)簽具備一定的盜竊cookie特征

  解決辦法

提交頁面時(shí)將script標(biāo)簽過濾再提交;

但可以通過插入圖片的超鏈接,點(diǎn)擊是執(zhí)行JavaScript腳本; 遇到這種時(shí)就需要將JavaScript腳本替換

關(guān)于cookie安全還要其他攻擊方式這里只簡單介紹一下cookie,深入了解請上網(wǎng)查詢資料。

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • 微信小程序 setData 對 data數(shù)據(jù)影響問題

    微信小程序 setData 對 data數(shù)據(jù)影響問題

    這篇文章主要介紹了微信小程序 setData 對 data數(shù)據(jù)影響的 一點(diǎn)研究,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-04-04
  • 5個(gè)可以幫你理解JavaScript核心閉包和作用域的小例子

    5個(gè)可以幫你理解JavaScript核心閉包和作用域的小例子

    這篇文章主要介紹了5個(gè)可以幫你理解JavaScript核心閉包和作用域的小例子,本文是翻譯自國外的一篇文章,短小精悍,需要的朋友可以參考下
    2014-10-10
  • JS前端分片上傳大文件步驟(支持1G以上的超大文件)

    JS前端分片上傳大文件步驟(支持1G以上的超大文件)

    當(dāng)前端在開發(fā)過程中遇到上傳文件需求,如果是小文件之類的可以正常按上傳流程處理,但是當(dāng)遇到上傳大文件需求時(shí)就需要分片上傳,這篇文章主要給大家介紹了關(guān)于JS前端分片上傳大文件(支持1G以上的超大文件)的相關(guān)資料,需要的朋友可以參考下
    2024-08-08
  • js生成驗(yàn)證碼并直接在前端判斷

    js生成驗(yàn)證碼并直接在前端判斷

    眾所周知,js是客戶端的,那么把驗(yàn)證都做在客戶端有意義嗎?還是必須從服務(wù)器生成的驗(yàn)證碼安全???前端生成的驗(yàn)證碼安全嗎?x下面我們來看個(gè)例子
    2015-05-05
  • JS event使用方法詳解

    JS event使用方法詳解

    event代表事件的狀態(tài),例如觸發(fā)event對象的元素、鼠標(biāo)的位置及狀態(tài)、按下的鍵等等。 event對象只在事件發(fā)生的過程中才有效。
    2008-04-04
  • js不完美解決click和dblclick事件沖突問題

    js不完美解決click和dblclick事件沖突問題

    當(dāng)某個(gè)元素,如:div,同時(shí)綁定了click事件和dblclick事件,而這兩個(gè)事件又要處理相對獨(dú)立的業(yè)務(wù),也就是click的時(shí)候不能觸發(fā)dblclick,dblclick的時(shí)候不能觸發(fā)click
    2012-07-07
  • 微信小程序swiper使用網(wǎng)絡(luò)圖片不顯示問題解決

    微信小程序swiper使用網(wǎng)絡(luò)圖片不顯示問題解決

    這篇文章主要介紹了微信小程序swiper使用網(wǎng)絡(luò)圖片不顯示問題解決,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2019-12-12
  • React+Typescript實(shí)現(xiàn)倒計(jì)時(shí)Hook的方法

    React+Typescript實(shí)現(xiàn)倒計(jì)時(shí)Hook的方法

    本文主要介紹了React+Typescript實(shí)現(xiàn)倒計(jì)時(shí)Hook的方法,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-09-09
  • ES6數(shù)組的擴(kuò)展詳解

    ES6數(shù)組的擴(kuò)展詳解

    這篇文章主要介紹了ES6數(shù)組的擴(kuò)展,結(jié)合實(shí)例形式詳細(xì)對比分析了ES6數(shù)組的新增方法與相關(guān)使用技巧,需要的朋友可以參考下
    2017-04-04
  • JavaScript實(shí)現(xiàn)旋轉(zhuǎn)圖像的三種方法介紹

    JavaScript實(shí)現(xiàn)旋轉(zhuǎn)圖像的三種方法介紹

    在文檔掃描Web應(yīng)用中,我們需要旋轉(zhuǎn)傾斜的或掃描方向錯(cuò)誤的文檔圖像,這篇文章主要為大家整理了使用JavaScript旋轉(zhuǎn)圖像的三種方法,希望對大家有所幫助
    2024-01-01

最新評論