js本地存储-localStorage和cookie详解以及区别

本地存储-localStorage和cookie

localStorage详解(重点是4.localStorage的使用)

1. 介绍

   • 浏览器提供的，可以将一些信息存储在缓存中的技术
   • 缓存，浏览器在硬盘中划分的独立区域，用来存储浏览器产生的资源
   • 硬盘 -> 某个软件(浏览器) -> 缓存 -> 本地存储 -> localStorage

2. 分类

   • cookie 老技术
     • 指定有效期
     • 不能跨域（浏览器，网站，路径）
   • storage HTML5规范中新增的本地存储
     • localStorage 只能永久
     • sessionStorage 只能会话级（关闭浏览器自动清除）

3. localStorage的特点

   • 自身是个对象，直接属于window
   • 只能存字符
   • 大小限制
   • 不能跨域（浏览器，网站）
   • 不安全性
     • 整个前端都不安全，前端没有安全性

4. localStorage的使用

   • 对象的操作

     localStorage.a = "hello";
     localStorage.a = "world";
     console.log(localStorage.a);
     delete localStorage.a;
     

   • 自身的API(方法) √√√
     • 设置
       • localStorage.setItem("key","val");
     • 获取
       • console.log(localStorage.getItem("key"));
     • 删除
       • localStorage.removeItem("key");
       • localStorage.clear(); // 慎用
     • 查看总数
       • localStorage.length

5. 本地存储的应用

   • localStorage
     • 记住账号密码
       • 友情提示：不要在公共区域勾选此项

6. 浏览器提供的查看本地存储的方式

   • 控制台的application选项 -> storage -> local storage
     • 刷新，删除一条，删除多条

cookie详解

1. cookie的介绍

• 也是一种本地存储。
• cookie：会话跟踪技术
  • 可以记录浏览器每次连接产生的状态
  • cookie记录到浏览器的缓存，所以，cookie也是本地存储的一种技术
  • 所以，cookie会跟随http协议发往后台
    • 意味着：cookie最好处于服务器环境中使用

2. cookie的特点

• 只能存文本

• 大小限制，大约4K

• 数量限制，大约50条

• 时间限制，默认：会话级(浏览器关闭)；可以指定过期时间

• 不允许跨域，浏览器，网站，路径

• 注意：任何本地存储，都没有安全性，所以，不要在本地存储中直接存储账号密码，至少要加密

3. cookie的使用

• cookie是document的一个属性，这个属性值是个字符
  • 通过给这个属性设置不同格式的字符，实现cookie的不同操作
  • document.cookie
    • 实现增删改查
    • 有效期，路径

    //只设置变量和值
    document.cookie = "qq=123";
    //设置变量、值以及路径
    document.cookie = "admin=123;path=/";
    // 设置有效期
    var d = new Date();
    d.setDate(d.getDate() + 4);
    document.cookie = "ww=123;expires=" + d;
    console.log(document.cookie);
    

• 因为cookie用来记录http的状态，所以会跟随http发往服务器，最好将cookie放在服务器环境中使用
  • 某些浏览器支持在本地环境使用cookie