Js前端缓存

 

 浏览器会有缓存，这样有时候登陆过的账号就不用再次登录，直到超过缓存时效。一共有以下三种缓存类型：

 

以下图的按钮举例：

一、cookie

cookie存储的数据很小，前后端都可以携带cookie（以字符串的形式存储）。当浏览器关闭的时候，自动清除cookie。缓存时效 expires

       let btn = document.querySelector(".btn");
        let getData = document.querySelector(".getData");

        // let time1 = new Date()
        // let time2 = new Date(time1.getTime() + 1000 * 60 * 60 * 24 * 30)
        let time = new Date(new Date().getTime() + 1000 * 60 * 60 * 24 * 30)

        console.log(time);


        btn.addEventListener("click", () => {
            // cookie   存储数据大小很小 前后端都可以携带cookie
            // 当浏览器关闭的时候  自动清除cookie
            document.cookie = `userid=1&age=18&city=cd`;
            document.cookie = `name=xioo`;

            // 设置cookie 的缓存时效 expires
            document.cookie = `name=xioo;expires=${time}`;


        })


        getData.addEventListener("click", () => {
            // cookie的取值
            console.log(document.cookie);

        })

二、localStorage本地缓存

存储的数据可以很大，除非自己删除缓存，或浏览器清除缓存，否则一直存在

       let btn = document.querySelector(".btn");
        let getData = document.querySelector(".getData");

        // let time1 = new Date()
        // let time2 = new Date(time1.getTime() + 1000 * 60 * 60 * 24 * 30)
        let time = new Date(new Date().getTime() + 1000 * 60 * 60 * 24 * 30)

        console.log(time);


        btn.addEventListener("click", () => {
            // localStorage 本地缓存  存值
            // 存储空间比较大，除非自己删除缓存或者浏览器清除缓存，否则一直存在
            window.localStorage.setItem("name","xioo")
        })

        getData.addEventListener("click", () => {
            // localstorage的取值
            console.log(window.localStorage.getItem("name"));
        })

三、sessionStorage会话缓存

关闭页面就会清除缓存

       let btn = document.querySelector(".btn");
        let getData = document.querySelector(".getData");

        // let time1 = new Date()
        // let time2 = new Date(time1.getTime() + 1000 * 60 * 60 * 24 * 30)
        let time = new Date(new Date().getTime() + 1000 * 60 * 60 * 24 * 30)

        console.log(time);


        btn.addEventListener("click", () => {

            // sessionStorage 会话缓存  当关闭页面就会清除缓存
            window.sessionStorage.setItem("age","18")


        })


        getData.addEventListener("click", () => {
            // sessionStorage的取值
            console.log(window.sessionStorage.getItem("age"));

            

        
        })