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日

相关文章

  • jsonp实现百度下拉框功能的方法分析

    下面是“jsonp实现百度下拉框功能的方法分析”的完整攻略,包含两条示例说明。 1. 什么是jsonp jsonp是JSON with Padding的缩写,是一种跨域数据访问的方法。通常情况下,由于浏览器同源策略的限制,我们无法通过ajax请求跨域的数据。但是可以通过动态添加<script>标签,来跨域获取数据。这就是jsonp的实现原理。 2…

    JavaScript 2023年5月27日
    00
  • js函数调用的方式

    下面是详细讲解 JavaScript 函数调用的方式的完整攻略。 直接调用函数 我们可以使用直接调用函数的方式来执行函数。这种方式最为简单,直接在函数名后加上()即可,例如: function sayHello() { console.log("Hello World"); } sayHello(); // 输出 "Hello …

    JavaScript 2023年5月27日
    00
  • JS实现利用闭包判断Dom元素和滚动条的方向示例

    下面是“JS实现利用闭包判断Dom元素和滚动条的方向示例”的完整攻略。 什么是闭包? 在JavaScript中,当函数可以访问并操作其作用域之外的变量时,就产生了闭包。 在函数内部定义一个内部函数,在内部函数中访问了外部函数的变量时,就形成了一个闭包。这个内部函数可以访问到外部函数中定义的变量,即使外部函数已经执行结束,这些变量仍然继续存在。 闭包有助于隐藏…

    JavaScript 2023年6月10日
    00
  • JavaScript中检测数据类型的四种方法

    当我们在进行 JavaScript 的开发时,必须经常检测数据类型以确保代码的正确性。本文将介绍 JavaScript 中检测数据类型的四种方法。 方法一:typeof 操作符 typeof 操作符用于检测变量的数据类型,返回一个字符串,表明该变量的数据类型。 console.log(typeof ‘Hello World’); // string cons…

    JavaScript 2023年6月10日
    00
  • JSON stringify及parse方法实现数据深拷贝

    JSON stringify及parse方法实现数据深拷贝 对于JavaScript中的对象类型,简单的赋值操作只是将对象的引用传递给了变量,而非真正的拷贝。因此,当我们需要对这些数据进行深拷贝时,需要使用到一些特殊的方法。 在JavaScript中,常用的实现数据深拷贝的方法有以下几种:遍历拷贝、jQuery中的$.extend方法、lodash库中的_.…

    JavaScript 2023年5月27日
    00
  • JavaScript文件上传的常见问题整理

    JavaScript文件上传是Web开发中常用的功能,但是在开发过程中也会出现一些常见问题。下面我给您讲解一下JavaScript文件上传的常见问题整理。 1. 文件上传的原理 文件上传的原理是通过form表单提交,form表单中需要使用标签项。选择文件后,将文件内容Post到服务器上的指定路径,服务器端处理完成后返回结果给浏览器。 2. 常见问题 2.1.…

    JavaScript 2023年5月19日
    00
  • JavaScript实现两个数组的交集

    请参考以下完整攻略: 问题描述 如何用JavaScript实现两个数组的交集? 解决方案 下面提供几种常见的解决方法。 方法一:双重循环法 最基本的方法就是使用双重循环,比较两个数组中的每个元素,找出相同的元素。这种方法优点在于思路简单,容易理解,缺点在于时间复杂度较高,当数组规模较大时性能很差。 const arr1 = [1, 3, 5, 7, 9]; …

    JavaScript 2023年5月27日
    00
  • 常用的js方法合集

    常用的JS方法合集 本篇攻略主要讲解常用的JS方法合集,包括字符串、数组、日期、正则表达式等方面的常用方法。 字符串方法 字符串是JS中最为常见的数据类型之一,在日常开发中经常需要对字符串进行操作。下面列出一些常用的字符串方法: string.length 用于获取字符串的长度,即包含的字符数。 javascript var str = “Hello Wor…

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