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

最新推荐文章于 2024-06-15 12:33:15 发布

代码哒搬运工

最新推荐文章于 2024-06-15 12:33:15 发布

阅读量568

点赞数 1

分类专栏： javascript html 前端文章标签： javascript html5 html 前端

本文链接：https://blog.csdn.net/weixin_45788388/article/details/105970521

版权

前端同时被 3 个专栏收录

45 篇文章 0 订阅

订阅专栏

html

43 篇文章 0 订阅

订阅专栏

javascript

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，它有两个对象：

localStorage和sessionStorage，它们都属于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); //此时是对象