又LAG隨性筆記
  • 關於我
  • 作品集
  • 生活隨筆
  • 與我聯絡
  • 隨手扎

隨手扎

October 5, 2022

你可能不知道cookie是怎被保存、保存在哪裡?

前言

再來是cookie最後,也是我認為最有意思的一部分–「cookie是怎被保存、保存在哪裡」 。

服務後端

對於開發後端服務的軟體開發人員,自己應當知道cookie存在哪裡,如何才可以將HTTP Request的狀態保留對應下來。而一般前端人員也不需要很清楚的知道cookie儲存在哪裡,只要認為儲存在瀏覽器內或記憶體內就好。

瀏覽器外存在哪裡

但是重開機後有一些cookie也存在,這表示必定有一個檔案儲存地方儲存這cookie。

以Google Chrome在Windows平臺為例,Cookie可能儲存在%LocalAppData%\Google\Chrome\User Data\Default\cookies或%LocalAppData%\Google\Chrome\User Data\Default\Network\cookies,這要看是什麼版本的若有在更新目前應該是後者。

這是以SQLite作為檔案型資料庫儲存的,因此可以使用對應的工具打開來看看:

October 4, 2022

你可能不知道cookie有些只能走特定道路(HTTP)

回信

當瀏覽器收到並儲存cookies後,在下一次的request就會將cookies跟著帶著送出去,回到Server。對於無狀態的HTTP,就可以使用這樣的方式讓Server回憶這個Request之前是誰,做到保留狀態。

同樣地接者調整前篇的程式碼片段。這次要將Server收到的Cookies直接作為Response的內容返回。先來添加需要的package:

from fastapi.requests import Request

然後添加一個endpoint–GET /cookies,將Server收到的Cookies直接作為Response的內容返回:

@app.get('/cookies')
def cookies(request: Request):
    return request.cookies

現在瀏覽 http://127.0.0.1.nip.io:8000/cookies 就可以收到傳給Server的Cookies作為JSON返回。

AJax with credition

October 3, 2022

你可能不知道cookie可以寄城市還可以分路段

預設收件區

Set-Cookie就像寫信,除了內容當然還有收件區號。如果並沒有給Domain,就是當前的Domain。比如當瀏覽 http://localhost:8000/index1.html ,其記錄的Domain就是localhost。

這個Domain就像是在寫信時填寫的區號,比如「桃園市楊梅區」的區號就是326。

填寫收件區號

現在可以複製你可能不知道cookie是怎麼被製造出來的裡的DEMO程式碼內容,在此基礎上繼續修改,填寫收件區碼。

October 2, 2022

你可能不知道cookie是怎麼被製造出來的

前言

你是タコたち嗎?你喜歡吃cookies嗎?那麼你知道cookies是怎麼被製造出來的嗎?

cookie是怎麼被製造出來的

cookies是在瀏覽器儲存的小小資料片段,通常來說當瀏覽器發出request時,有可能同時將cookie發送出去。利用這個特性,可以將通常來說無狀態的HTTP保有記憶,做到登入功能、追蹤行爲等等。

雖然我們可以透過瀏覽器開發工具新增cookie。

October 1, 2022

你可能不知道的Function.prototype.bind()

前言

Function有三種用法,除了一般呼叫方式外,還可以使用Function.prototype.call()或Function.prototype.apply()方法。此外,Function還有一個很常見,偶爾會與後兩個用法混淆的方法–Function.prototype.bind()。沒錯,這節就是要來說說Function.prototype.bind()和另外兩者的差異,以及常見用法和你可能不知道的Function.prototype.bind()。

<Fn>.call()/<Fn>.apply() 和 <Fn>.bind()的差異

由於過去其實我是寫過bind()的相關內容的。所以我個人並不曾將三者搞混,蠻能區分用法上的不同的。不過在偶然幾次討論程式碼應該如何寫的過程中,發現偶爾會有人弄不清楚何時應該使用bind()?何時使用其他兩者?

回頭看我過去所寫的,也蜻蜓點水的點到過call()和apply()。它們三者的參數形式確實有些像,特別是bind()和call()都接受一個thisArg參數和多個參數展開。

所以Function.prototype.bind()有甚麼不同之處嗎?

Function.prototype.call()和Function.prototype.apply()與一般函式呼叫寫在同一節裡,他們三著共同點是「會真的執行函示內容」。與他們不同的是Function.prototype.bind()並不會真的執行函式,它會返回一個新的函式。

function helloWorld() {
    console.log(`Hello World`)
}

helloWorld();       // 會印出 Hello World
helloWorld.call();  // 會印出 Hello World
helloWorld.apply(); // 會印出 Hello World

helloWorld.bind();  // 不會印出 Hello World。返回一個函式物件

新的函式物件與原本的可能沒有什麼差異:

var newFn1 = helloWorld.bind();
newFn1();  // 會印出 Hello World

雖然上面程式碼很像是直接賦值給變數,但還是有些差異。

var newFn2 = helloWorld;
newFn2 === helloWorld;   // true。直接賦值的話是同一個函式物件
newFn1 === helloWorld;   // false。使用bind()會產生一個新的函式物件,儘管它們用起來可能很像,但依然不同

直接賦值的話是同一個函式物件;相對來說,使用bind()會產生一個新的函式物件。儘管它們用起來可能很像,但依然不同。

常見用法

在JavaScript裡面this是一個特別的存在。它經常會有隱含綁定和隱含遺失的狀況。

September 30, 2022

為什麼你需要知道Function的三種用法

前言

在設計函式與呼叫函式前,或許得認識到一些限制,這些限制有可能造成需要使用不同的設計方式或呼叫方式。就來談一下一些在JavaScript語言裡的一些限制吧!

安全整數範圍

JavaScript裡關於「整數」是有範圍限制在的,按照規範這個值的範圍是(±2**53)內,也就是-9007199254740991~9007199254740992。這個值你可以透過Number.MIN_SAFE_INTEGER和Number.MAX_SAFE_INTEGER取得。

BigInt

在ES11後多加了一個基本類別BigInt,儘管這個類型的使用方式和Number並不相容1。但是在過去寫過的7天搞懂js進階議題中曾經使用過。如果你有需要超過-9007199254740991~9007199254740992範圍的整數,可以考慮使用BigInt。

陣列長度

Array會需要留意:屬性.length的最大值爲2**32-1也就是4294967295。

這意味著以下一些操作是會出問題的

var arr = Array(4294967296); // 超出最大範圍

{
    let arr = Array(4294967295);
    arr.push(0); // 超出最大範圍
}

此外,-1的索引值並不是像Python會得到最後一個元素2。實際上經過以下操作:

var arr = [1,2,3,4];
arr[-1] = 5;
console.log(arr);

最後arr的結果應該會像是:

[-1: 5, 1, 2, 3, 4]

另外.length也不會算上-1的索引值。

  • ««
  • «
  • 1
  • 2
  • 3
  • 4
  •  … 
  • 33
  • »
  • »»
© 又LAG隨性筆記 2023