DOM程式設計藝術(資料儲存)

2021-07-14 13:03:51 字數 1900 閱讀 3673

一、cookie

瀏覽器中的cookie是乙個小型文字檔案。cookie是儲存在瀏覽器端的,但是大部分時候我們是在伺服器端對cookie進行設定。我們可以在http返回體中通過設定set-cookie這個頭部來告訴瀏覽器這個cookie。

1、乙個完整的cookie的構成:

屬性名預設值

作用name

名value

值domain

當前文件域

作用域path

當前文件路徑

作用路徑

expires/max-age

瀏覽器會話時間

失效時間

secure

false

https協議時生效

注:紅色是必須有的。

function getcookie();

var all = document.cookie;

if(all === '')

return cookie;

var list = all.split('; ');

for(var i = 0; i < list.length; i ++)

return cookie;

}

3、cookie的設定/修改

//第一種方法:對cookie直接賦值

document.cookie = 'name=value';

//第二種

function setcookie(name, value, expires, path, domain, secure)

4、刪除cookie
function removecookie(name, path, domain)
5、cookie的缺陷:

①流量代價

②安全性問題(由於它是明文傳遞的)

③大小限制(一般瀏覽器對於cookie都只有4kb的大小)

二、storage

1、分類:根據有效期和作用域的不同,分為:localstorage(有效期在使用者不對它進行刪除的情況下預設為永久)

sessionstorage(有效期在會話結束時消亡)

2、作用域:

localstorage的作用域是由協議、主機名、埠決定的;

sessionstorage的作用域是在localstorage作用域的基礎上加上視窗的限制,瀏覽器不同的視窗間是不共享sessionstorage的。

3、大小:大部分瀏覽器對storage的支援都在5mb左右。

4、可以將storage理解為乙個js物件:

①讀取:

-localstorage.name

②新增/修改

-localstorage.name = "netease"(目前只支援string)

③刪除-delete localstorage.name

5、呼叫api進行增刪查改

好處:可以進行向下相容(如果瀏覽器不支援storage,可以用cookie進行模擬)

*獲取鍵值對數量

----localstorage.length

*讀取----localstorage.getitem("name"),localstorage.key(i)

*新增/修改

----localstorage.setitem("name", "netease")

*刪除對應鍵值

----localstorage.removeitem("name")

*刪除所有資料

----localstorage.clear()

DOM程式設計藝術(動畫)

1 實現方式 gif flash css3 js2 三要素 物件dom物件 屬性 定時器 setinterval settimeout requestanimationframe setinterval var intervalid setinterval func,delay param1,par...

DOM程式設計藝術 position屬性

position屬性的合法值有static fixed relative和absolue四種。static是position屬性的預設值,意思是有關元素將按照它們在標記裡出現的先後順序出現在瀏覽器視窗裡。relative的含義魚static相似,區別是position屬性等於relative的元素還...

讀dom程式設計藝術總結 操作dom元素

一.獲取元素節點三種方法 document.getelementbyid id1 document.getelementsbytagname 標籤的名字例如 ul 得到所有的標籤 html5新增的方法 document.getelementbyclassname id1 可以這樣封裝 functio...