目录

为什么要本地缓存？

1、cookie

cookie特点：

cookie的注意项：

cookie设置

cookie清除

2、localStorage和sessionStorage

设置getItem()：

获取setItem()：

删除removeItem()：

其他的一种设置获取：

全部清除clear()：

为什么要本地缓存？

有时候我们客户端（浏览器）从服务端请求的数据要多个页面且多次使用时，我们就要把这个数据请求到，储存到我们的本地缓存，这样就可以减少请求的次数，减轻服务器的负担，当网络不好时，网页的加载速度也会变快一些。

1、cookie

cookie特点：

1、有时效性，不设置有效期，默认关闭浏览器就失效。2、分域名储存，在当前域名下储存只能在当前域名下使用。3、分路径储存，根路径不能用子路径的数据，子路径可以用根路径的数据。

cookie的注意项：

cookie识别的时间是世界时间，和我们北京时间有八个小时时差

cookie设置

document.cookie = '键=值;expires=失效时间;path=要储存的路径;'

// document.cookie = '键=值;expires=失效时间;path=要储存的路径;'

var date = new Date()

date.setTime(date.getTime() - 8*3600*1000 + 2*3600*1000)

//上面的时间表示，当前时间戳 - 八小时 + 两个小时

//减八小时是为了获取到正确的世界时间，不然直接获取时间戳是北京时间

//加两个小时表示该数据有效时间为两个小时

document.cookie = `name=李四;expires=${date};path=/`

// path=/ 表示储存在根目录下

然后我们就可以在控制台看到这个数据

cookie清除

document.cookie = '键=值;expires=失效时间改到已经过去的时间'

document.cookie = 'name=张三'

let time = new Date()

time.setTime(time.getTime() - 8*3600*1000 - 1)

document.cookie = 'name=null;expires=' + time

console.log(document.cookie)

我们在控制台可以看到这里只剩下了李四的数据，并没有张三的数据，说明张三的数据已经被我们清除了

2、localStorage和sessionStorage

localStorage的特点：数据会永久储存，不清除的话一直都在

sessionStorage的特点：浏览器刷新或者关闭时，数据会丢失

设置getItem()：

localStorage.setItem('name', '张三')

sessionStorage.setItem('name', '李四')

这里我们就能看到缓存的数据了

获取setItem()：

这样我们在控制台也能看到缓存的数据

localStorage.setItem('name', '张三')

sessionStorage.setItem('name', '李四')

console.log(localStorage.getItem('name'))

console.log(sessionStorage.getItem('name'))

删除removeItem()：

//设置缓存

localStorage.setItem('name', '张三')

sessionStorage.setItem('name', '李四')

//删除缓存

localStorage.removeItem('name')

sessionStorage.removeItem('name')

//获取缓存

console.log(localStorage.getItem('name'))

console.log(sessionStorage.getItem('name'))

其他的一种设置获取：

假如我们这里有一串数据

const jsonData = [

{

"id": 3,

"username": "cuihua",

"password": "asdf333",

"nickname": "asdf",

"identity": "学生",

"gender": "女",

"age": 23,

"createTime": 1647587821399,

"updateTime": 1647587905785,

"cart": []

},

{

"id": 4,

"username": "admin",

"password": "123456",

"nickname": "ed",

"identity": "学生",

"gender": "",

"age": "",

"createTime": 1649251356317,

"updateTime": 1649251356317,

"cart": []

},

{

"id": 5,

"username": "sa123",

"password": "111111",

"nickname": "张三",

"identity": "学生",

"gender": "",

"age": "",

"createTime": 1649317083990,

"updateTime": 1649317083990,

"cart": []

}

]

还可以这样设置

//设置

localStorage.jsonData = JSON.stringify(jsonData)

sessionStorage.jsonData = JSON.stringify(jsonData)

//获取

console.log(localStorage.jsonData)

console.log(sessionStorage.jsonData)

全部清除clear()：

我们先设置一些数据

localStorage.setItem('name', '张三')

localStorage.age = '18'

sessionStorage.setItem('name', '李四')

sessionStorage.age = '20'

console.log(localStorage.getItem('name'), localStorage.age)

console.log(sessionStorage.getItem('name'), sessionStorage.age)

这里控制台还能看到数据

然后清除所有缓存

localStorage.setItem('name', '张三')

localStorage.age = '18'

sessionStorage.setItem('name', '李四')

sessionStorage.age = '20'

//清除所有数据

localStorage.clear()

sessionStorage.clear()

console.log(localStorage.getItem('name'), localStorage.age)

console.log(sessionStorage.getItem('name'), sessionStorage.age)

我们就获取不到数据了