在 practice
資料夾下,建立 cookie.html
,以便練習。
並用網域(例:http://127.0.0.1:5500/practice/cookie.html
)的方式來開啟。
Cookie 是網站在您瀏覽網頁時儲存在您的電腦上的資料。
Cookie 可用於儲存各種資訊,包含個人識別資訊(例如姓名、id……等等)。
容量空間有限,大約 4K 左右。
可以設定 cookie 的存活期間,如果沒有設定,預設就是當下使用者瀏覽網頁的期間(session),結束瀏覽器的話就自動消失。
開啟開發者工具,在 Application 頁籤當中。
以下程式建立了兩個 cookie,名稱(Name)叫做「food_id」,值(Value)是「abc」;另一個是名稱叫做「ad_code」,值是「year2020」:(執行完以下程式後,找出在哪裡看得到。)
更新的語法同上,如果 food_id 本身是已經存在的話,那就會是更新。
會是一整個字串。如果想取得單一的資訊呢? 其實滿麻煩。參考後續的函式提供。
以下原始碼,設定 ad_code 這個 cookie 的存活期間是到「Thu, 18 Dec 2999 03:00:00 UTC
」
只要將 cookie 的存活期間設定成過去的時間,就會刪除,例:
https://www.w3schools.com/js/js_cookies.asp 官方提供了 setCookie 及 getCookie 函式,讓我們方便設定 cookie 及 取得 cookie,第三個 checkCookie 是老師改寫,判斷某 cookie 是否存在,回傳 true 或 false。
在 practice/js/
資料夾下,建立 all_func.js
檔案,將以上原始碼放進去。然後頁面要載入 all_func.js
檔案。
然後練習執行以下程式:
在 practice
資料夾下,建立 localstorage.html
,以便練習。
在 html5 還沒有出來之前,本機端的儲存方式,使用的是 cookie,但空間有限,大約是 4k 左右。
而 html5 出來之後,多了 localStorage 儲存方式,空間更大,大約 5M,而且使用了 key-value
的儲存方式,使得更有彈性。
以下是將資料儲存在 localStorage 的三種寫法,以 key-value
的方式儲存,例:
開啟本機端網址來觀察:http://127.0.0.1:3000/web_storage/localstorage.html
如下圖:
儲存 JSON 格式資料,使用 JSON.stringify()
將資料字串化:
可透過以下方式取得 localStorage 裡的資料:
如果 localStorage 裡沒有指定的資料,會回傳 undefined
。
如果有儲存 JSON 資料,取出時,通常會用 JSON.parse()
來轉回物件格式:
可透過以下方式來更新 localStorage 裡的資料:
可透過以下方式來刪除 localStorage 裡的資料:
特性
cookie
localStorage
生命週期
預設是關閉瀏覽器後失效,但可以設定失效的時間。
除非手動清除,否則並不會消失。
大小
大約4K
一般是 5Mb