本地存储

一、Cookie

1、Cookie是什么

Cookie 全称是HTTP Cookie 简称Cookie 是浏览器存储数据的一种方式

  • Cookie存储在用户本地,而不是存储在服务器上,是本地存储
  • 一般会自动随着浏览器每次请求发送到服务器端

2、Cookie有什么用

  • 利用Cookie跟踪同级用户访问该网站的习惯,例如什么四件访问,访问了哪些页面,在每个网页停留的时间

3、在浏览器中操作cookie

查看随着请求在请求头中发送到服务器


image.png

在控制台查看站点对应的cookie值


image.png

4、写入 Cookie

不能一起设置,只能一个一个设置

document.cookie = 'username=zs';
document.cookie = 'age=18';
// 错误写法
// document.cookie = 'username=zs; age=18';

5、读取cookie

读取的是一个由名值对构成的字符串,每个名值对之间由“; ”(一个分号和一个空格)隔开
username=zs; age=18

console.log(document.cookie);

6、Cookie 的名称(Name)和值(Value)

最重要的两个属性,创建 Cookie 时必须填写,其它属性可以使用默认值

  Cookie 的名称或值如果包含非英文字母,则写入时需要使用 encodeURIComponent() 编码,读取时使用 decodeURIComponent() 解码
  document.cookie = 'username=alex';

  document.cookie = `username=${encodeURIComponent('张三')}`;
  document.cookie = `${encodeURIComponent('用户名')}=${encodeURIComponent(
    '张三'
  )}`;

  一般名称使用英文字母,不要用中文,值可以用中文,但是要编码

7、失效时间

  • 对于失效的 Cookie,会被浏览器清除
  • 如果没有设置失效(到期)时间,这样的 Cookie 称为会话 Cookie
  • 它存在内存中,当会话结束,也就是浏览器关闭时,Cookie 消失
  • 想长时间存在,设置 Expires 或 Max-Age
    expires 值为 Date 类型
  document.cookie = `username=alex; expires=${new Date(
    '2100-1-01 00:00:00'
  )}`;

max-age值为数字,表示当前时间 + 多少秒后过期,单位是秒

  document.cookie = 'username=alex; max-age=5';
  document.cookie = `username=alex; max-age=${24 * 3600 * 30}`;\

如果 max-age 的值是 0 或负数,则 Cookie 会被删除

  document.cookie = 'username=alex';
  document.cookie = 'username=alex; max-age=0';
  document.cookie = 'username=alex; max-age=-1';

8、Domain 域:Domain 限定了访问 Cookie 的范围(不同域名)

使用 JS 只能读写当前域或父域的 Cookie,无法读写其他域的 Cookie

document.cookie = 'username=alex; domain=www.imooc.com';
// www.imooc.com m.imooc.com 当前域
//  父域:.imooc.com

9、Path 路径 :Path 限定了访问 Cookie 的范围(同一个域名下)

  • 使用 JS 只能读写当前路径和上级路径的 Cookie,无法读写下级路径的 Cookie
  • 当 Name、Domain、Path 这 3 个字段都相同的时候,才是同一个 Cookie
  document.cookie = 'username=alex; path=/course/list';
  document.cookie = 'username=alex; path=/1.Cookie/';

10、 HttpOnly :设置了 HttpOnly 属性的 Cookie 不能通过 JS 去访问

11、Secure 安全标志

  • Secure 限定了只有在使用了 https 而不是 http 的情况下才可以发送给服务端
  • Domain、Path、Secure 都要满足条件,还不能过期的 Cookie 才能随着请求发送到服务器端

12、cookie的封装

// 写入 Cookie
const set = (name, value, { maxAge, domain, path, secure } = {}) => {
  let cookieText = `${encodeURIComponent(name)}=${encodeURIComponent(value)}`;

  if (typeof maxAge === 'number') {
    cookieText += `; max-age=${maxAge}`;
  }

  if (domain) {
    cookieText += `; domain=${domain}`;
  }

  if (path) {
    cookieText += `; path=${path}`;
  }

  if (secure) {
    cookieText += `; secure`;
  }

  document.cookie = cookieText;

  // document.cookie='username=alex; max-age=5; domain='
};

// 通过 name 获取 cookie 的值
const get = name => {
  name = `${encodeURIComponent(name)}`;

  const cookies = document.cookie.split('; ');

  for (const item of cookies) {
    const [cookieName, cookieValue] = item.split('=');

    if (cookieName === name) {
      return decodeURIComponent(cookieValue);
    }
  }

  return;
};

// 'username=alex; age=18; sex=male'
// ["username=alex", "age=18", "sex=male"]
// ["username","alex"]

// get('用户名');

// 根据 name、domain 和 path 删除 Cookie
const remove = (name, { domain, path } = {}) => {
  set(name, '', { domain, path, maxAge: -1 });
};

export { set, get, remove };

13、cookie的注意事项

  • 前后端都可以创建 Cookie
  • Cookie 有数量限制
    • 每个域名下的 Cookie 数量有限
    • 当超过单个域名限制之后,再设置 Cookie,浏览器就会清除以前设置的 Cookie
  • Cookie 有大小限制
    • 每个 Cookie 的存储容量很小,最多只有 4KB 左右

二、localStorage

1、localStorage 是什么

localStorage 也是一种浏览器存储数据的方式(本地存储),它只是存储在本地,不会发送到服务器端
单个域名下的 localStorage 总大小有限制

2、localStorage 的基本用法

  // setItem()
  localStorage.setItem('username', 'alex');
  localStorage.setItem('username', 'zs');
  localStorage.setItem('age', 18);
  localStorage.setItem('sex', 'male');

  // length
  // console.log(localStorage.length);

  // getItem()
  // console.log(localStorage.getItem('username'));
  // console.log(localStorage.getItem('age'));

  // // 获取不存在的返回 null
  // console.log(localStorage.getItem('name'));

  // removeItem()
  // localStorage.removeItem('username');
  // localStorage.removeItem('age');

  // // 删除不存在的 key,不报错
  // localStorage.removeItem('name');

  // clear()
  localStorage.clear();

  console.log(localStorage);

3、localStorage 的注意事项

  • localStorage 的存储期限
    • localStorage :是持久化的本地存储,除非手动清除(比如通过 js 删除,或者清除浏览器缓存),否则数据是永远不会过期的
    • sessionStorage:当会话结束(比如关闭浏览器)的时候,sessionStorage 中的数据会被清空
  • localStorage 键和值的类型
    • localStorage 存储的键和值只能是字符串类型
    • 不是字符串类型,也会先转化成字符串类型再存进去
    // localStorage.setItem('students', [{},{}]);
    console.log(
    typeof localStorage.getItem('[object Object]'),
    localStorage.getItem('[object Object]')
    );
    
    console.log({}.toString());
    
  • 不同域名下能共用 localStorage
  • localStorage 的兼容性 :IE7及以下版本不支持 localStorage,IE8 开始支持
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,033评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,725评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,473评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,846评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,848评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,691评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,053评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,700评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,856评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,676评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,787评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,430评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,034评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,990评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,218评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,174评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,526评论 2 343

推荐阅读更多精彩内容

  • cookie也叫HTTP Cookie,最初是客户端与服务器端进行会话使用的 document.cookie = ...
    碧玉含香阅读 395评论 0 1
  • 首先介绍什么叫存储: cache:通常把它叫做缓存,功能就是把从DB,或者磁盘拿出来的东西放在缓存里面,这样的话可...
    _双眸阅读 1,523评论 0 0
  • 三种本地存储方式 cookie 前言 网络早期最大的问题之一是如何管理状态。简而言之,服务器无法知道两个请求是否来...
    流动码文阅读 4,954评论 0 3
  • 三种本地存储方式 cookie 前言 网络早期最大的问题之一是如何管理状态。简而言之,服务器无法知道两个请求是否来...
    CodeMT阅读 239评论 0 0
  • 本文介绍本地数据存储的选型。简单总结一些查询到的关于本地数据存储的技术。 控制台展示前端存储 Chrome: 前端...
    谢大见阅读 9,045评论 1 8