js本地缓存的三种方式

目录

为什么要本地缓存？

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)

我们就获取不到数据了