JavaScript本地儲存

2021-09-24 06:04:11 字數 1812 閱讀 5858

什麼是cookie?

本質上cookie就是一些資料,一些儲存在電腦上的文字檔案資料。

使用cookie的原因

當web伺服器向瀏覽器傳送web頁面是,在鏈結關閉時,伺服器不會記錄使用者資訊。

cookie的作用

解決『如何記錄客戶端得使用者資訊』

cookie的儲存形式

cookie是以鍵值對的形式儲存

cookie的使用方式

cookie的建立

以鍵值對的形式以分號結束

document.cookie="username=zs;***=man;"
注意:cookie只能一次傳乙個值,當你一次傳多個值的時候可以用迴圈來載入。

cookie的有效時間

①如果不給cookie設定有效時間,它預設的有效時間是當瀏覽器關閉時,cookie也被消除。

②設定到某個具體時期

首先獲取當前時間,然後再設定多久結束。例如:

var timer=new date();

timer.settime(timer.gettime()+10*1000);

document.cookie="uesrname=zs;expires="+timer.toutcstring()

這裡表示cookie的有效時間為10s

這裡還有一種這只cookie有效時間的方式,例如:

document.cookie="username=zs;max-age=10"

這裡也表示cookie的有效時間為10s

cookie的增刪改查

①設定cookie的有效路徑

可以通過path來設定cookie的有效路徑,例如:

document.cookie="username=zs;max-age=10;path=/"

這裡cookie的有效路徑為全域性有效

注意:path路徑同級的可以訪問並且修改,子級目錄可以訪問沒辦法修改,父級目錄沒法訪問也沒法修改;如果設定path               為全域性路徑的cookie,它的所有根目錄都能訪問和修改。

②刪除cookie

只需要設定cookie的有效時間為0s或者設定為當前時間;

③修改cookie

只需重新設定想修改的cookie,它會把原來的cookie覆蓋;

④讀取cookie

使用document.cookie來讀取cookie;

什麼是localstorage?

設定localstorage後就本地永久生效,在整個**的所有頁面都有效

localstorage的增刪改查

可以使用物件的增刪改查,也可以使用它自有的方法;

localstorage.setitem(a,b)--------------表示設定localstorage的乙個鍵為a,值為b;

引數a表示設定的鍵,引數b表示所對應的值;

localstorage.getitem(a)--------------表示獲取localstorage的某乙個鍵a;

引數a表示獲取的localstorage的鍵

localstorage.removeitem(a)--------------表示移除localstorage的某乙個鍵a;

localstorage.clear()--------------表示移除localstorage所有的鍵;

sessionstoragelocalstorage唯一的不同就是設定的sessionstorage當瀏覽器一關閉就刪除,而localstorage則是永久有效。

Javascript本地儲存

sessionstorage localstorage 和 cookie 共同點 都是儲存在瀏覽器端,且同源的。區別 cookie資料始終在同源的http請求中攜帶 即使不需要 即cookie在瀏覽器和伺服器間來回傳遞。而sessionstorage和localstorage不會自動把資料發給伺服器...

Javascript本地儲存資料方案

這個恐怕是最常見也是用得最多的技術了,也是比較古老的技術了。cookie優點很多,使用起來很方便 但它的缺點也很多 比如跨域訪問問題 無法儲存太大的資料 最大僅為4kb 本地儲存的資料會傳送給伺服器,浪費頻寬 等等 大家都比較熟悉,這裡不再過多介紹。下面主要說一下html5提供的幾種本地儲存方案。這...

Web 本地儲存和Vue本地儲存例項

資料的設定和讀取比較方便。容量較大,sessionstorage大約為5mb,localstorage大約為20mb。只能儲存字串,若想要儲存json物件,則可以使用window.json.stringify 或者parse 進行序列化和反序列化編碼 sessionstorage的儲存週期只有一次會...