浅析浏览器存储中的缓存cookie和Storage

43 篇文章 0 订阅
33 篇文章 0 订阅

浏览器存储可以让我们在前端缓存一些数据,今天我们来介绍两种存储方式:

cookie和Storage。

  • cookie

Cookie 是一些数据, 存储于你电脑上的文本文件中。数据是以键值对形式存储的。我们可以在浏览器的控制台中查看。如下图:

在这里插入图片描述

当浏览器从服务器上请求 web 页面时, 属于该页面的 cookie 会被添加到该请求中。服务端通过这种方式来获取用户的信息。如下图:

在这里插入图片描述

JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookie。

创建cookie

document.cookie="username=刘小妞";

一次只能设置一个值,可以多次设置不同的键值。比如:

document.cookie="work=前端";

在这里插入图片描述

注意,如果设置的键cookie里存在,会覆盖掉之前的值,我们也是通过这种方式来修改cookie值。比如:

document.cookie="username=刘小小";

在这里插入图片描述

可以为 cookie 添加一个过期时间(以 UTC 或 GMT 时间)。默认情况下,cookie 在浏览器关闭时删除,比如:

document.cookie="username=刘小妞; expires=Thu, 17 Dec 2020 12:00:00 GMT";

在这里插入图片描述

可以使用 path 参数设置 cookie 的路径。不同浏览器对于cookie默认的路径处理的不一样,有的默认是当前页面,有的是根目录,我在chrome里默认是根目录。

如果设置成根目录,就是全站都可以使用设置的cookie:

document.cookie="username=刘小妞; expires=Thu, 17 Dec 2020 12:00:00 GMT; path=/admin";

在这里插入图片描述

  • 读取cookie:
var a = document.cookie;

在这里插入图片描述

返回一个字符串。多个cookie键值以分号空格隔开。

  • 删除cookie:

删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可,如下所示,设置为 Thu, 01 Jan 1970 00:00:00 GMT:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

cookie的增删改查就介绍完了。通过以上的方法,用起来并不是很方便,所以,我们需要自己封装一下。我们用的比较多的就是设置和读取,我们来封装两个函数。

设置cookie值:

function setCookie(cname,cvalue,exdays)
{
  var d = new Date();
  d.setTime(d.getTime()+(exdays*24*60*60*1000));
  var expires = "expires="+d.toGMTString();
  document.cookie = cname + "=" + cvalue + "; " + expires;
}

读取cookie值:

function getCookie(cname)
{
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for(var i=0; i<ca.length; i++) 
  {
    var c = ca[i].trim();
    if (c.indexOf(name)==0) return c.substring(name.length,c.length);
  }
  return "";
}

通过上面的两个函数,我们能够通过key、value的形式来设置cookie值,可以通过key来读取cookie值。用起来要方便很多。

Storage是html5里的API,它有两个对象:

localStoragesessionStorage,它们都属于window对象的属性。

这两个对象的方法和属性一样,它们两个的区别是:

localStorage是永久存储在浏览器里的,除非手动删除了。
sessionStorage是临时存储的,关闭窗口或者标签页都会被删除。

localStorage和sessionStorage存储的数据也是key/value键值对,应用于整个网站的,我们也可以在浏览器的控制台里看到。如下:

在这里插入图片描述

这两个对象的方法和属性,使得我们能够很方便的对数据进行操作。
length属性:返回存储对象中包含多少条数据。

setItem(key, value)方法:添加键和值,如果对应的值存在,则更新该键对应的值。比如:

localStorage.setItem('username',"刘小妞");

getItem(key)方法:返回指定键的值。比如:

localStorage.getItem('username');

注意,Storage存储的数据会默认是字符串,当我们存储的数据类型是对象时,我们一般用JSON.stringify() 和JSON.parse()这两个方法对数据进行转换。比如:

var data={
        name:'刘小妞',
        sex:'女'
};
var d=JSON.stringify(data);
localStorage.setItem("data",d);

var jsonstr=localStorage.getItem("data"); //此时是字符串
var jsonObj=JSON.parse(jsonstr); //此时是对象

removeItem(key)方法:移除键。比如:

localStorage.removeItem('username');

clear()方法:清除存储对象中所有的键。比如:

localStorage.clear();

key(n)方法:返回存储对象中第 n 个键的名称,n从0开始。比如:

localStorage.key(1);

以上属性和方法,localStorage和sessionStorage都适用。

cookie和Storage的区别:

cookie的存储大小只有4K,
Storage的存储大小一般是5M,不同浏览器可能会略微不同。

cookie是存储在浏览器里数据,但是,浏览器请求服务器的时候,会把cookie里的数据发送到服务端,Storage里的数据不会发送给服务端。

如果想看跟多前端文章,欢迎微信搜索公众号:“刘小妞的栖息地”或者识别下面的二维码查看,感谢大家的支持。

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值