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

时间：2024-02-17 10:32:01

本地存储-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最好处于服务器环境中使用
  1. cookie的特点

  • 只能存文本

  • 大小限制，大约4K

  • 数量限制，大约50条

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

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

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

  1. 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

相关文章