JavaScript全解析——本地存儲

　　●就是瀏覽器給我們提供的可以讓我們在瀏覽器上保存一些數(shù)據(jù)

　　●常用的本地存儲

　　○ localStorage

　　○sessionStorage

　　localStorage

　　=> 特點:

　　-> 長期存儲,除非手動刪除否則會一直保存在瀏覽器中 清除緩存或者卸載瀏覽器也就沒有了

　　-> 可以跨頁面通訊, 也就是說在一個頁面寫下在另一個頁面可以讀取

　　=> 保存

　　-> 語法: window.localStorage.setItem(名字,值)

　　-> 注意: 只能保存字符串類型的數(shù)據(jù),其它數(shù)據(jù)類型不能被保存

　　=> 獲取

　　-> 語法: window.localStorage.getItem(名字)

　　-> 注意: 保存的是字符串類型,取出來的也是字符串類型

　　-> 返回值:

　　+ 如果localStorage 中有這條數(shù)據(jù) 拿到的就是這個條數(shù)據(jù)的值

　　+ 如果localStorage 中沒有這條數(shù)據(jù) 拿到的就是 null

　　=> 刪除

　　-> 語法: 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

　　=> 特點:

　　-> 會話存儲,就是瀏覽器關閉就沒有了

　　-> 可以跨頁面通訊(有要求)

　　-> 要求:必須是本頁面跳轉才可以

　　->

　　=> 保存

　　-> 語法: window.sessionStorage.setItem(名字,值)

　　-> 注意: 只能保存字符串類型的數(shù)據(jù),其它數(shù)據(jù)類型不能被保存

　　=> 獲取

　　-> 語法: window.sessionStorage.getItem(名字)

　　-> 注意: 保存的是字符串類型,取出來的也是字符串類型

　　-> 返回值:

　　+ 如果 sessionStorage 中有該條數(shù)據(jù) 獲取到的就是該條數(shù)據(jù)的值

　　+ 如果 sessionStorage 中沒有該條數(shù)據(jù) 拿到的就 null

　　=> 刪除

　　-> 語法: 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')

　　瀏覽器本地存儲 - cookie

　　特點:

　　1. 只能存儲字符串, 有固定的格式

　　=> key=value; key2=value2; key3=value3

　　2. cookie 存儲大小有限制

　　=> 4KB 左右

　　3. 存儲的時效性

　　=> 默認是會話級別時效, 可以手動設置過期時間

　　4. 操作必須依賴服務器

　　=> 本地打開的頁面是不能操作 cookie

　　=> 也就是存存不上 , 讀讀不出來

　　=> 要求頁面必須在服務器打開

　　5. 跟隨前后端請求自動攜帶

　　=> 只要 cookie 空間中有內(nèi)容的時候

　　=> 會在該頁面和后端交互的過程中自動攜帶

　　6. 前后端操作

　　=> 前端可以使用 JS 來操作

　　=> 任何一個后端語言都可以操作

　　7. 存儲依賴域名

　　=> 哪一個域名存儲, 哪一個域名使用

　　=> 不能跨域名通訊

　　cookie 的操作

　　設置一條 cookie

　　●語法: document.cookie = 'key=value'　　

// 設置一條 cookie
// 設置了一條叫做 a 的 cookie 存儲的值是 100
document.cookie = 'a=100'
// 設置了一條叫做 b 的 cookie 存儲的值是 200
document.cookie = 'b=200'

// 設置一條帶有過期時間的 cookie
var time = new Date()
document.cookie = 'a=100;expires=' + time
// 設置一條 30s 以后過期的 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

　　●語法: document.cookie

　　● 返回值: 完整的 cookie 字符串　

console.log(document.cookie)