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()
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值