JS封装cookie操作函数实例(设置、读取、删除)

下面我来为你详细讲解“JS封装cookie操作函数实例(设置、读取、删除)”的完整攻略。

什么是cookie

cookie 是浏览器用于存储用户信息的一种机制。当我们需要在应用程序之间共享数据时,可以使用 cookie 来存储数据。它是一种名为键-值对的数据结构,可以存储在浏览器中的本地电脑上,并在将来的会话之间使用。

如何进行cookie操作

我们可以使用 JavaScript 来设置、读取和删除 cookie。下面我会为你逐一介绍。

设置cookie

要设置 cookie,我们需要传入三个参数:cookie名称(键),cookie值(值)和可选的过期时间(以天数为单位)。以下是一个设置 cookie 的示例:

function setCookie(name, value, expireDays) {
  var d = new Date();
  d.setTime(d.getTime() + (expireDays * 24 * 60 * 60 * 1000));
  var expires = "expires="+ d.toUTCString();
  document.cookie = name + "=" + value + ";" + expires + ";path=/";
}

在此示例中,我们使用 document.cookie 属性来设置 cookie。

读取cookie

要读取 cookie,我们只需要提供要检索的 cookie 的名称(键)。以下是一个读取 cookie 的示例:

function getCookie(name) {
  var cookies = document.cookie.split(';');
  for(var i = 0; i < cookies.length; i++) {
    var cookie = cookies[i];
    while (cookie.charAt(0) == ' ') {
      cookie = cookie.substring(1);
    }
    if (cookie.indexOf(name) == 0) {
      return cookie.substring(name.length, cookie.length);
    }
  }
  return "";
}

在此示例中,我们使用 document.cookie 属性来检索 cookie,并使用 split() 函数将 cookie 字符串拆分为 cookie 数组。然后我们循环遍历 cookie 数组,并提取我们要检索的 cookie。

删除cookie

要删除 cookie,我们只需要将 cookie 的过期日期设置为当前日期之前的一个月。以下是一个删除 cookie 的示例:

function deleteCookie(name) {
  document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
}

在此示例中,我们使用 document.cookie 属性来删除 cookie,并将过期时间设置为遥远的日期。

示例说明

下面,我将通过两个示例来更详细地介绍 cookie 操作。

示例一:使用 cookie 存储用户信息

我们可以使用 cookie 来存储用户信息,比如用户名、密码等。当用户访问网站时,我们可以检查 cookie 中是否存在该用户的信息,并自动填充相应的表单。以下是一个示例:

var form = document.querySelector('form');
var usernameInput = document.querySelector('input[name="username"]');
var passwordInput = document.querySelector('input[name="password"]');
var rememberInput = document.querySelector('input[name="remember"]');

// 检查 cookie 中是否有用户信息
var username = getCookie('username');
var password = getCookie('password');
var remember = getCookie('remember');

// 如果存在用户信息,自动填充相应的表单
if (username) {
  usernameInput.value = username;
}
if (password) {
  passwordInput.value = password;
}
if (remember) {
  rememberInput.checked = true;
}

// 当用户提交表单时,将用户信息存储到 cookie 中
form.addEventListener('submit', function (event) {
  if (rememberInput.checked) {
    setCookie('username', usernameInput.value, 7);
    setCookie('password', passwordInput.value, 7);
    setCookie('remember', 'true', 7);
  } else {
    deleteCookie('username');
    deleteCookie('password');
    deleteCookie('remember');
  }
});

在此示例中,我们使用 getCookie() 函数来检查 cookie 中是否存在用户信息,并使用 setCookie() 函数将用户信息保存到 cookie 中。当用户提交表单时,我们将用户信息存储到 cookie 中,并在下次访问网站时自动填充表单。

示例二:使用 cookie 存储用户偏好设置

我们还可以使用 cookie 存储用户偏好设置,比如用户选择的语言、主题等。以下是一个示例:

var languageSelect = document.querySelector('#language-select');
var themeSelect = document.querySelector('#theme-select');

// 检查 cookie 中是否有用户偏好设置
var language = getCookie('language');
var theme = getCookie('theme');

// 如果存在用户偏好设置,自动选中相应的选项
if (language) {
  languageSelect.value = language;
}
if (theme) {
  themeSelect.value = theme;
}

// 当用户更改偏好设置时,将其存储到 cookie 中
languageSelect.addEventListener('change', function () {
  setCookie('language', languageSelect.value, 7);
});
themeSelect.addEventListener('change', function () {
  setCookie('theme', themeSelect.value, 7);
});

在此示例中,我们使用 getCookie() 函数来检查 cookie 中是否存在用户偏好设置,并使用 setCookie() 函数将用户偏好设置保存到 cookie 中。当用户更改偏好设置时,我们将其存储到 cookie 中,并在下次访问网站时自动选中相应的选项。

总结

通过本文,我们了解了如何使用 JavaScript 设置、读取和删除 cookie,并通过两个示例说明了 cookie 在存储用户信息和用户偏好设置方面的应用。希望你能从中获得帮助。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JS封装cookie操作函数实例(设置、读取、删除) - Python技术站

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • 推荐10 款 SVG 动画的 JavaScript 库

    标题:推荐10款SVG动画的JavaScript库 介绍:本文将会介绍10个优秀的SVG动画的JavaScript库,使你可以更好的在网站中使用SVG动画。我们将从这些库的特点和优点开始,然后根据需求来选择最适合你的库,同时也会提供几个实例来更好的了解这些库。 一、Snap.svgSnap.svg 是一个基于 SVG 元素的 JavaScript 库。它是一…

    JavaScript 2023年6月10日
    00
  • js 判断上传文件大小及格式代码

    下面是关于 JS 判断上传文件大小及格式的完整攻略。 判断上传文件大小 如果想在上传文件时限制上传文件大小,可以使用以下代码进行判断: const fileSizeLimit = 1024 * 1024; // 限制 1MB const file = document.querySelector(‘input[type="file"]’)…

    JavaScript 2023年5月27日
    00
  • 编写高质量JavaScript代码的基本要点

    编写高质量JavaScript代码的基本要点有以下几点: 1. 规范代码格式 良好的代码格式不仅可以使代码更容易阅读和理解,还可以提高代码的可维护性和可重用性。为此,我们需要遵循一些规范,如: 使用一致的缩进方式和空格或制表符 使用行末注释而不是行内注释 使用严格模式,避免使用全局变量 具有良好的代码结构,如按功能或逻辑分组功能块 以下是一个示例代码块,展示…

    JavaScript 2023年5月18日
    00
  • javascript 系统文件夹文件操作及参数介绍

    下面是关于“javascript 系统文件夹文件操作及参数介绍”的完整攻略。 标题 JavaScript 系统文件夹文件操作 介绍 JavaScript 可以通过 Node.js 模块 fs 来操作系统文件夹和文件。其中,fs 模块提供了一系列的 API,让开发者能够以代码的方式对文件进行读写、更改、创建、删除等操作。 API 参数介绍 以下为几个常用的 A…

    JavaScript 2023年5月27日
    00
  • 如何让每个Http请求都自动带上token

    要让每个HTTP请求都自动携带token,我们可以使用拦截器来实现。拦截器是一个可以在请求和响应之间进行干预的组件,我们可以在它的回调方法中加入我们需要的逻辑,比如带上token。下面是一个完整的攻略: 步骤一:添加拦截器 首先,我们要添加一个拦截器,代码如下: public class TokenInterceptor implements Interce…

    JavaScript 2023年6月11日
    00
  • js调试系列 控制台命令行API使用方法

    JS调试系列:控制台命令行API使用方法 控制台是Web浏览器开发工具的一部分,可以用于调试JavaScript代码以及检查页面元素。控制台中包含了一个强大的命令行接口,用户可以通过API直接与页面交互,从而进行调试、编辑、修改和测试。 本文将详细讲解控制台命令行API的使用方法,包括常见的API函数、参数、数据类型、输出格式等,并附带两个实例说明。 控制台…

    JavaScript 2023年5月27日
    00
  • JavaScript实现动态添加、移除元素或属性的方法分析

    JavaScript实现动态添加、移除元素或属性的方法分析 动态添加元素 方法一:createElement()方法 我们可以使用createElement()方法来创建一个新的元素节点,然后将该节点添加到文档中的某个元素中作为其子元素。其基本语法为: document.createElement(tagName) 其中,tagName指定新节点的标签名称,…

    JavaScript 2023年6月10日
    00
  • TS 中 never,void,unknown类型详解

    那么我们来详细讲解一下 TS 中 never、void 和 unknown 类型的相关知识点。 never 类型 never 类型表示永不存在的类型。也就是说,无法终止的函数或者总是抛出错误的函数的返回类型就是 never。 在实际使用中,通常用于处理不应该出现的情况或者用于避免编写无用的代码。 下面是一个示例函数,它总是会抛出异常: function th…

    JavaScript 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部