cookie和web存储

一、cookie

可保存已访问过的字符串信息，保存方式以域名为单位。大体的信息在浏览器就可以看到，可能保存用户名、密码…

• 在服务器环境下使用cookie
• 客户端与后端都能设置cookie
• 每个网页之间、浏览器之间cookie不共享
• 与后端的交互都会带上cookie
• 单个域名的cookie不能超过4kb
• 客户端每次可以获取所有的cookie内容，每次只能设置一条cookie字段

1.前端设置cookie

        let date = new Date()
        let time = date.toUTCString()
        // console.log(time);          // Sat, 02 Jan 2021 13:26:36 GMT
        document.cookie = "name = hello ; expires = Sat, 02 Jan 2021 13:30:00 GMT ; domain = test.com"      // 名称为name，内容时hello；过期时间为expires,需要是格林威治时间；domain是cookie作用的域名，不设时，默认对当前域名的当前路径有效；

2.获取cookie

        console.log(document.cookie);

3. 清除cookie

 let date = new Date(new Date().getTime()-1000)		// 设置为过去的时间，自动删除

4.设置、获取、清除cookie方法封装

        // 封装设置cookie
        function setCookie(name, value, day){
            let date = new Date
            date.setDate(date.getDate() + day)
            let expires = date.toGMTString()
            document.cookie = `${name} = ${value}, expires = ${expires}`
        }

        // 封装获取cookie
        function getCookie(name) {
            let cookies = document.cookie
            let cookieArr = cookies.split(";")      // 用分号隔开字符串
            for(let i = 0; i< cookies.length; i++){
                let cook = cookieArr[i].split("=")      // 用等号分隔键值对，并存入cook
                if(cook[0].trim() === name){        // trim方法可去掉空格
                    return cook[1]                  // 返回值
                }
            }
        }

        // 封装删除cookie
        function delCookie(name, value){
            setCookie(name, value, -1)          // 设置过期时间就可删除cookie
        }

        setCookie("age", 18, 2)
        getCookie("age")
        delCookie("age", 18)

二、Web存储

1. localStorage 本地存储，永久存储。比较占内存
2. sessionStorage 会话存储，临时存储。关闭网页即消失

        // sessionStorage与localStorage方法相同
		let localStorage = window.localStorage
        // 1.设置本地存储
        localStorage.setItem('key', 'value')
        // 2. 获取本地存储
        localStorage.getItem('key')
        // 3. 删除某个
        localStorage.removeItem('key')
        // 4.删除所有存储
        localStorage.clear()

       let localStorage = window.localStorage
       localStorage.setItem('info', JSON.stringify([{"name" : "csdn"}, {"age" : 18}]))      // 一次性建多个localStorage,JSON.stringify()方法是将数组转成字符串

		let info = JSON.parse(localStorage.getItem('info'))
		// JSON.parse()方法将字符串转数组

       console.log(info);
    //    Array(2)
    //    0: {name: "csdn"}
    //    1: {age: 18}
    //    length: 2
    //    __proto__: Array(0)

三、重要的一点

谷歌改了配置，所以一直没实现设置本地cookie,从网上查到有用下面这个方法来修复，但是我试了下，还是没效果。

有其他方法的小伙伴，欢迎评论下，谢谢

首先确保设置处的是允许所有cookie

1. 在浏览器输入chrome:// flags,可打开chrome expirements项目，为谷歌的测试功能

2.搜索框输入same-site,将前两个的值改为disabled.

欢迎打扰