Js中cookie与Storage如何存取 以及应用场景

储存 cookie

cookie储存大小为 4KB

		let now = new Date()
        now.setDate(now.getDate() + 7)
        // expires 删除的时间 如果不设置关闭浏览器就会删除
        document.cookie = 'username=Ace;expires=' + now

        // 如果key的名字username相同 会按照下面的为准
        /*  now = new Date()
         now.setDate(now.getDate() + 7)
         document.cookie = 'username=Lufei;expires=' + now */

        now = new Date()
        now.setDate(now.getDate() + 7)
        document.cookie = 'age=20;expires=' + now

• 如何获取

// 如果只要一个key值 username
        //cookie取值
        document.cookie.split(';').forEach(r => {
            let arr = r.split('=')
            if (arr[0] === 'username') {
                console.log(arr[1])
            }
        })

• 如何删除cookie
  删除cookie 可以进入设置 也可以在 相当于到期时间为今天之前，这样肯定就没了 now.setDate(now.getDate() - 7)

Storage

• localStorage 只要储存了将会一直在本地，没有过期时间 除非手动删除
• sessionStorage 临时储存 如果关闭浏览器将会被删除
  可以在控制台中查看
  

        //存
        localStorage.setItem('username','Ace')
        //取
        console.log(localStorage.getItem('username'))
        // 删
        localStorage.removeItem('username')

        sessionStorage.setItem('username','Ace')

• Storage可以储存4M 比较大 所以有时为了减轻服务器的压力会在本地储存一些目录
  还有一些商场网站，在没有登录的情况下可以将商品放入购物车，如何实现：每次加入购物车时如果没有登录，将商品参数放入本地的storage中，登录之后会将stoarge中的商品同步到用户个人的购物车中去。

			let loadlist = () => {
			// 先获取 看里面有没有存储这个数组
            let cache = localStorage.getItem('jslist')
            //如果没有进入If 里将请求到的数据 储存到Storage中
            if (!cache) {
                $.get('http://xxxx.0.1:5500/data.json', data => {
                    cache = data
                    localStorage.setItem('jslist', JSON.stringify(cache))
                })
            }
        }
        loadlist()