JavaScript學習教程之cookie與webstorage

這篇文章主要給大家介紹了關於JavaScript學習教程之cookie與webstorage的相關資料,文中通過示例代碼介紹的非常詳細,對大家學習或者使用JavaScript具有一定的參考學習價值,需要的朋友們下面來一起學習學習吧

cookie

由於http是無狀態的協議,一旦客戶端和服務器的數據交換完畢,就會斷開連接,再次請求,會重新連接,服務器單從網絡連接上是沒有辦法知道用戶身份的。cookie就是爲了解決此問題而產生的,每次新的用戶請求時,便給用戶頒發一個獨一無二的身份證,下次訪問,必須帶上身份證,這樣服務器就會知道是哪個用戶進行了訪問,針對不同用戶,做出不同的響應cookie是一個很小的純文本文件(最多爲4K),是瀏覽器儲存在用戶的機器上的。儲存一些服務器需要的信息,每次請求站點,會發送相應的cookie,這些cookie可以用來辨別用戶身份信息等作用。

cookie的屬性字段

JavaScript學習教程之cookie與webstorage
通過上面的實例可以知道,給cookie賦值時是不會覆蓋cookie的原有的值,當等號前的屬性名相同時,纔會將原來相同屬性名的值覆蓋爲後來設置的值。注意,cookie的兩個字段之間是通過一個分號和空格分隔,而不是隻有一個分號
當要給cookie設置非自定義的屬性字段時,需要通過字符串追加的方式
例如:

let expireDate = new Date();
document.cookie += ";expires=" + expireDate.toString();

注意: ";expires="中的分號必須有,如果字段前不加分號則會認爲這是一個自定義字段

domain

非頂級域名,如二級域名或者三級域名,設置的cookie的domain只能爲頂級域名或者二級域名或者三級域名本身,不能設置其他二級域名的cookie,否則cookie無法生成。
頂級域名只能設置domain爲頂級域名,不能設置爲二級域名或者三級域名,否則cookie無法生成。
二級域名能讀取設置了domain爲頂級域名或者自身的cookie,不能讀取其他二級域名domain的cookie。所以要想cookie在多個二級域名中共享,需要設置domain爲頂級域名,這樣就可以在所有二級域名裏面或者到這個cookie的值了。
頂級域名只能獲取到domain設置爲頂級域名的cookie,其他domain設置爲二級域名的無法獲取。
總的來說就是,上級域名不能訪問下級域名的cookie,下級域名可以讀取自身及上級域名的cookie,同級域名的cookie不共享,即同級域名之間不能互相訪問對方的cookie,只能訪問自身的cookie。

path

path字段爲可以訪問此cookie的頁面路徑。 比如domain是abc.com,path是/test,那麼只有/test路徑下的頁面可以讀取此cookie。
expires/Max-Age
expires/Max-Age 字段爲此cookie超時時間。若設置其值爲一個時間,那麼當到達此時間後,此cookie失效。不設置此字段時,默認值是Session,即當瀏覽器關閉(注意:不是瀏覽器標籤頁,而是整個瀏覽器) 後,此cookie失效。
let expireDate = new Date("2019-5-26T09:00:00");
document.cookie += ";expires=" + expireDate.toString();
若要刪除某條cookie則設置此條cookie的expires爲當前時間之前的時間的即可
let expireDate = new Date("1970-01-01T00:00:00");
document.cookie += ";expires=" + expireDate.toString();

size

Size字段 此cookie大小。
httpOnly
若此屬性爲true,則只有在http請求頭中會帶有此cookie的信息,而不能通過document.cookie來訪問此cookie,設置爲true可以減少受到Xss***的風險
secure
secure 字段 設置是否只能通過https來傳遞此條cookie
localstorage/sessionstorage
webstorage並不是要替代cookie,而是爲了彌補隨着web的發展,cookie在存儲限制(存儲容量最多爲4k),安全性(在http協議中明文傳輸)存在的缺點而提出的
兩者的API是相同的

function intro

setItem(key, value) 以鍵值對的形式保存一條數據
getItem(key) 根據鍵來獲得值
removeItem(key) 根據鍵來刪除一條數據
key(index) 根據索引獲得鍵的名稱
clear() 刪除全部數據
兩者都有length屬性

sessionStorage.setItem("name", "Jack");
sessionStorage.setItem("phone", "18856894523");
console.log(sessionStorage.getItem('name')); // Jack
console.log(sessionStorage.key(0)); // name
console.log(sessionStorage.length); // 2
sessionStorage.removeItem('phone');
console.log(sessionStorage.length); // 1
sessionStorage.clear();    
console.log(sessionStorage.length); // 0

兩者的比較

localStorage和sessionStorage都是用來存儲客戶端臨時信息的對象。均只能存儲字符串類型的對象,雖然規範中可以存儲其他原生類型的對象,但是目前爲止沒有瀏覽器對其進行實現。
localStorage生命週期是永久,除非用戶顯示在瀏覽器提供的UI上清除localStorage信息,否則這些信息將永遠存在。
sessionStorage生命週期爲當前窗口或標籤頁,一旦窗口或標籤頁被永久關閉了,sessionStorage存儲的數據就被清空了。
不同瀏覽器無法共享localStorage或sessionStorage中的信息。
相同瀏覽器的不同頁面(頁面屬於相同域名和端口)間可以共享相同的localStorage
不同頁面或標籤頁間無法共享sessionStorage的信息。注意,頁面及標籤頁僅指頂級窗口,如果一個標籤頁包含多個iframe標籤且屬於同源頁面,那麼他們之間是可以共享sessionStorage的。
使用window.open打開頁面和改變localtion.href方式都可以獲取到sessionStorage內部的數據

cookie 與 webstorage的區別

存儲限制
每個domain中只能存儲最多20條cookie,cookie數據不能超過4K
webStorage也有存儲大小的限制,但是比cookie大得多,可以達到5M或更大
數據的有效期
sessionStorage:僅在當前的瀏覽器窗口關閉有效;
localStorage:始終有效,除非用戶手動刪除
cookie:cookie過期時間之前一直有效,即使窗口和瀏覽器關閉

作用域

sessionStorage:不在不同的瀏覽器窗口中共享,即使是同一個頁面;
localStorage:同源窗口共享
cookie:同源窗口共享

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章