●就是瀏覽器給我們提供的可以讓我們?cè)跒g覽器上保存一些數(shù)據(jù)
●常用的本地存儲(chǔ)
○ localStorage
○sessionStorage
localStorage
=> 特點(diǎn):
-> 長(zhǎng)期存儲(chǔ),除非手動(dòng)刪除否則會(huì)一直保存在瀏覽器中 清除緩存或者卸載瀏覽器也就沒(méi)有了
-> 可以跨頁(yè)面通訊, 也就是說(shuō)在一個(gè)頁(yè)面寫(xiě)下在另一個(gè)頁(yè)面可以讀取
=> 保存
-> 語(yǔ)法: window.localStorage.setItem(名字,值)
-> 注意: 只能保存字符串類(lèi)型的數(shù)據(jù),其它數(shù)據(jù)類(lèi)型不能被保存
=> 獲取
-> 語(yǔ)法: window.localStorage.getItem(名字)
-> 注意: 保存的是字符串類(lèi)型,取出來(lái)的也是字符串類(lèi)型
-> 返回值:
+ 如果localStorage 中有這條數(shù)據(jù) 拿到的就是這個(gè)條數(shù)據(jù)的值
+ 如果localStorage 中沒(méi)有這條數(shù)據(jù) 拿到的就是 null
=> 刪除
-> 語(yǔ)法: window.localStorage.removeItem(名字)
-> 作用: 就是刪除localStorage中該條數(shù)據(jù)
// 保存
var num = 200
window.localStorage.setItem('a', num)
// 獲取
var res = window.localStorage.getItem('b')
console.log(res);
console.log(typeof res);
// 刪除
window.localStorage.removeItem('a')
sessionStorage
=> 特點(diǎn):
-> 會(huì)話存儲(chǔ),就是瀏覽器關(guān)閉就沒(méi)有了
-> 可以跨頁(yè)面通訊(有要求)
-> 要求:必須是本頁(yè)面跳轉(zhuǎn)才可以
->
=> 保存
-> 語(yǔ)法: window.sessionStorage.setItem(名字,值)
-> 注意: 只能保存字符串類(lèi)型的數(shù)據(jù),其它數(shù)據(jù)類(lèi)型不能被保存
=> 獲取
-> 語(yǔ)法: window.sessionStorage.getItem(名字)
-> 注意: 保存的是字符串類(lèi)型,取出來(lái)的也是字符串類(lèi)型
-> 返回值:
+ 如果 sessionStorage 中有該條數(shù)據(jù) 獲取到的就是該條數(shù)據(jù)的值
+ 如果 sessionStorage 中沒(méi)有該條數(shù)據(jù) 拿到的就 null
=> 刪除
-> 語(yǔ)法: window.sessionStorage.removeItem(名字)
-> 作用: 就是刪除 sessionStorage 中的這條數(shù)據(jù)
// 保存
window.sessionStorage.setItem('a', 300)
// 獲取
var res = window.sessionStorage.getItem('a')
console.log(res);
console.log(typeof res);
// 刪除
window.sessionStorage.removeItem('a')
瀏覽器本地存儲(chǔ) - cookie
特點(diǎn):
1. 只能存儲(chǔ)字符串, 有固定的格式
=> key=value; key2=value2; key3=value3
2. cookie 存儲(chǔ)大小有限制
=> 4KB 左右
3. 存儲(chǔ)的時(shí)效性
=> 默認(rèn)是會(huì)話級(jí)別時(shí)效, 可以手動(dòng)設(shè)置過(guò)期時(shí)間
4. 操作必須依賴(lài)服務(wù)器
=> 本地打開(kāi)的頁(yè)面是不能操作 cookie
=> 也就是存存不上 , 讀讀不出來(lái)
=> 要求頁(yè)面必須在服務(wù)器打開(kāi)
5. 跟隨前后端請(qǐng)求自動(dòng)攜帶
=> 只要 cookie 空間中有內(nèi)容的時(shí)候
=> 會(huì)在該頁(yè)面和后端交互的過(guò)程中自動(dòng)攜帶
6. 前后端操作
=> 前端可以使用 JS 來(lái)操作
=> 任何一個(gè)后端語(yǔ)言都可以操作
7. 存儲(chǔ)依賴(lài)域名
=> 哪一個(gè)域名存儲(chǔ), 哪一個(gè)域名使用
=> 不能跨域名通訊
cookie 的操作
設(shè)置一條 cookie
●語(yǔ)法: document.cookie = 'key=value'
// 設(shè)置一條 cookie
// 設(shè)置了一條叫做 a 的 cookie 存儲(chǔ)的值是 100
document.cookie = 'a=100'
// 設(shè)置了一條叫做 b 的 cookie 存儲(chǔ)的值是 200
document.cookie = 'b=200'
// 設(shè)置一條帶有過(guò)期時(shí)間的 cookie
var time = new Date()
document.cookie = 'a=100;expires=' + time
// 設(shè)置一條 30s 以后過(guò)期的 cookie
var time = new Date()
time.setTime(time.getTime() - 1000 * 60 * 60 * 8 + 1000 * 30)
// console.log(time)
document.cookie = 'a=100;expires=' + time
獲取 cookie
●語(yǔ)法: document.cookie
● 返回值: 完整的 cookie 字符串
console.log(document.cookie)
京公網(wǎng)安備 11010802030320號(hào)