封装cookie的操作函数并附上操作实例

最新推荐文章于 2021-10-15 16:54:09 发布

前端李小白

最新推荐文章于 2021-10-15 16:54:09 发布

阅读量136

点赞数

分类专栏： javascript 文章标签： cookie

本文链接：https://blog.csdn.net/qq_42268364/article/details/100519670

版权

javascript 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

首先，创建一个js文件

//创建cookie
function setCookie(key, value, expires) {
  document.cookie = encodeURIComponent(key) + '=' + encodeURIComponent(value) + ';expires=' + ddate(expires);
}

function ddate(expires) {
  var ddate = new Date()
  ddate.setDate(ddate.getDate() + expires)
  return ddate
}

//读取cookie
function getCookie(name) {
  var arrStr = document.cookie.split('; ');
  //alert(arrStr)
  for (var i = 0; i < arrStr.length; i++) {
    var arr = arrStr[i].split('=')
    //alert(arr[0]+'\n'+arr[1])
    if (arr[0] == name) { return decodeURIComponent(arr[1]) }
  }
  return ''
}
//删除cookie
function removeCookie(name) {
  setCookie(name, '', -1)
}

再然后在你需要的地方引入即可，
附上两个应用实例

1.如果用户第一次打开这个网页，那就弹出一个弹窗


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="cookie.js"></script>
</head>

<body>
  <h1>欢迎访问我们网站</h1>
  <script>
    function loadPage() {
      if (getCookie('user') == '') {
       window.open('表单的生成.html','','height=300,width=200,top=100,left=100')
       setCookie('user','表单的生成.html',7)
      }
    }
    loadPage()
  </script>
</body>

</html>

在这里插入图片描述

2.记住用户名


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="cookie.js"></script>
</head>

<body>
  <form action="#">
    <p> 用户名：<input type="text" id="username"></p>
    <label for=""><input type="checkbox" id="checkbox">记住用户名</label>
    <p> 密&nbsp;&nbsp;&nbsp;&nbsp;码：<input type="password"></p>
    <input type="submit" value="登录" id="password" onclick="submit1()">

  </form>
  <script>
    var user = document.getElementById('username')
    var checkbox = document.getElementById('checkbox').checked
    function submit1() {
      if (checkbox) {
        setCookie('user1', user.value, 7)
      } else {
        removeCookie('user1')
      }
    }
    user.value = getCookie('user1')
  </script>
</body>

</html>

在这里插入图片描述

前端李小白

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
封装cookie的操作函数并附上操作实例

首先，创建一个js文件//创建cookiefunction setCookie(key, value, expires) { document.cookie = encodeURIComponent(key) + '=' + encodeURIComponent(value) + ';expires=' + ddate(expires);}function ddate(expires...
复制链接

扫一扫