Cookie和LocqlStorage

07.localstorage 本地存储

• 也是浏览器提供的一个存储空间

• 和 cookie 的区别

  • cookie 前后台来回跑，localStorage 只存储再浏览器不会来回跑
  • cookie 前后台都可以设置， localStorage 只能由前台操作
  • cookie 存储的是字符串，localStorage 存储json格式的字符串或者普通字符串
  • cookie 存储 4KB 左右，localStorage 20M 左右
  • cookie 自己封装 API 去操作，localStorage 有自己的 API 直接操作
  • cookie 默认会话级别时效性，localStorage 默认永久时效（除非手动删除）

• 和 cookie 一样的地方

  • cookie 按照域名存储，localStorage 也是

• 操作 localStorage

  • 设置：localStorage.setItem(‘你要设置的 key’, ‘你要设置的 value’)
  • 获取：localStorage.getItem(‘你要获取的 key’)
  • 删除：locqlStorage.removeItem(‘你要删除的 key’)
  • 清空：localStorage.clear()

08.完善项目

• 【1】实现详情页

• 【2】实现登录页面

• 【3】实现购物车功能

  • 判断用户是否登录
    • 进入购物车的时候判断是否登录
    • 把商品添加到购物车的时候判断是否登录
  • 如果有登录就显示购物车（并且把购物车的数据保存在浏览器的本地）
  • 如果没有登录就去到登录页面
  • 当点击全选的时候 把商品前面的勾勾上，并且计算总价
  • 当把商品中的其中一个勾去掉的时候，全选的勾也要去掉，商品的总价只计算被勾上的
  • 点击+ -按钮的时候，改变商品的数量，总价也跟着改变
  • 点击我不要了，要这条数据删除（刷新页面的时候也是显示被删除后的效果，删除数据库和localstorage中的数据）
  • 点击结算的时候，把勾上的数据删除（删除本地 和数据库中数据，并且总价的价格清零）
  • 清空购物车（把该用户数据库中所有的数据删除，把本地存储的数据也删除）