cookie和localStorage课程大纲

2017课程大纲

cookie介绍

• cookie 是 http 协议的一部分
• 保存登录信息，辨别用户身份
• 大小在4K左右

操作cookie

• 服务端操作cookie
  
  • 服务器向客户端发送 cookie
    
    • 通常使用 HTTP 协议规定的 set-cookie 头操作
    • 规范规定 cookie 的格式为 name = value 格式，且必须包含这部分
  • 浏览器将 cookie 保存。
  • 每次请求浏览器都会将 cookie 发向服务器
• 客户端操作cookie
  
  • 获取cookie：document.cookie
  • 设置cookie：document.cookie = newCookie
• 对cookie的设定/更新：
  
  • path：表示 cookie 影响到的路径，默认为当前文档位置的路径。
  • expires 告诉浏览器这个 cookie 什么时候过期，expires 是 UTC 格式时间
  • secure：当 secure 值为 true 时，cookie 在 HTTP 中是无效，在 HTTPS 中才有效
  • httpOnly：浏览器不允许脚本操作 document.cookie 去更改 cookie
• 封装操作cookie的方法：setCookie、getCookie、removeCookie

localStorage介绍

• 利用localStorage做本地存储
• 保存的数据都仅限于该域名下
• 浏览器关闭，然后重新打开后数据仍然存在，除非清除了浏览器的缓存来清空localStorage
• 大小在5M左右
• 操作localStorage
  
  • localStorage.setItem(key，value)：设置存储的数据，以key、value的形式存储，将会把键值对添加到存储中，如果键名存在，则更新其对应的值。
  • localStorage.removeItem()：该方法接受一个键名作为参数，并把该键名从存储中删除。
  • localStorage.getItem()：该方法接受一个键名作为参数，返回键名对应的值。
  • localStorage.clear():调用该方法会清空存储中的所有键名。
• storage事件
  
  • 创建/更新/删除数据项时，触发该事件，重复设置相同的键值不会触发该事件
  • 在同一个页面内发生的改变不会起作用——在相同域名下的其他页面发生的改变才会起作用。
  • 在其他域名下的页面不能访问相同的localStorage