浏览器中使用JS操作Cookie详解

骑猪看日落 2023-10-04 21:56 25阅读 0赞

浏览器中如何操作Cookie？  
关于Cookie的概念和应用，大家可以看看我前面的几篇文章。并且在Cookie详解这篇文章中，介绍了如何在服务器端和使用JavaScript创建Cookie，并设置属性。

我们知道，Cookie是存储在客户端的，并且现在前后端分离慢慢变得流行起来，因此如何在浏览器上可以使用方便快捷的操作Cookie变得尤为重要。使用原生JS操作方法在上篇文章中已经写过，原生JS虽然更简单，但是操作起来还是比较费力的，下面我们一起来看下更加简单方便的几种方法。

1.jQuery Cookie  
jQuery Cookie是一个简单、轻巧的jQuery插件，主要用于读取，编写和删除cookie。因为是主要是为了增强jQuery的功能，因此对于许多之前用过jQuery的同学而言，其使用起来更加的方便。

要想使用jQuery Cookie，首先要在页面上引入两个JS文件，代码如下：

2.js-cookie  
js-cookie一个简单、轻巧的处理Cookie的JavaScript的API。这么看来其和jQuery Cookie相差似乎不大，两个插件的体积也都不大，压缩后都是1Kb左右，但是js-cookie的一个优势就是不需要依赖jQuery，这样我们在使用Vue等其他前端框架时可以更方便的使用。

除了上述，js-cookie官网上对其有点的介绍如下所述：

可以在所有浏览器上工作  
支持任何字符  
经过严格的测试  
没有任何依赖  
支持ES模块  
支持AMD/CommonJS  
实用的wiki文档  
支持自定义编码/解码  
体量小  
下面就让我们一起来体验下js-cookie，首先，在页面上引入JS文件，代码如下：

之后我们就可以直接使用js-cookie提供的一个Cookie对象，其中提供了许多操作Cookie的方法：

我们可以发现js-cookie中的API的使用和jQuery Cookie是非常类似的，参数列表基本一致，因此使用起来也是上手很快。

需要注意的是，这里删除Cookie时，同样需要传入Cookie创建时相同的参数。

js-cookie同样支持模块开发，有兴趣可以执行查看文档。

3.小结  
本文介绍了jQuery Cookie、js-cookie的使用方法，两者的使用非常类似，大家也可以根据自己的喜欢来选择，无论哪种，都会比原生的js要方便。这里还是比价推荐js-cookie，因为其不要依赖别的JS，当然还有许多别的好处。