细讲前端设置cookie， 储存用户登陆信息

细讲前端设置cookie

• 引言
• 正文
• 1、设置cookie
• 2、查看cookie
• 3、删除cookie
• 4、封装cookie操做
• 结束语

引言

咱们都知道若是想作一个用户登陆并使浏览器保存其登陆信息，使得用户下次再访问网页的时候无需再次进行登陆操做，咱们须要用到 cookies ， 今天咱们就来说讲前端如何给客户端设置 cookie

正文

cookie 只有在服务环境下，才能设置，因此若是要尝试练习设置cookie的话，可使用webstorm编辑器， 它内部自带服务环境，若是用别的编辑器的小伙伴的话，先本身搭一个简单的服务环境哦~

1、设置cookie

设置 cookie 其实很简单，只须要这样一行代码

<script>
    document.cookie = 'name=张三'
</script>

咱们来看看浏览器上 cookie 的信息， 能够看到图上显示该cookie到期时间就是会话结束，即关闭浏览器 cookie 清除，这是由于咱们在设置cookie时，只设置了 cookie的值，可没设置到期时间。

可是咱们知道 cookie 是用来保存用户的登陆信息的， 咱们不能让 cookie 一直在浏览器上存在，须要给 cookie 设置一个到期时间， 接下来咱们来看这样一段代码

<script>
    let data = new Date().getTime()   //先将此时的时间转化为毫秒
    let new_data = new Date(data + 7*24*60*60*1000)  //将过时时间设置为7天后
    // toUTCString() 是将时间根据世界时转换为字符串
    document.cookie = 'name=张三;' + 'expires=' + new_data.toUTCString()
</script>

咱们来看一下设置了过时时间后的cookie 是一个什么样的状况

明显能够看到，此时浏览器上的 cookie 有了一个过时时间， 因此咱们再一次重启浏览器， 这个 cookie 仍是存在的

注意：这里补充一点，咱们若是想要设置多条 cookie ， 咱们必须一条一条设置，不能批量设置，例如若是要设置两条cookie的话：

<script>
    let data = new Date().getTime()   //先将此时的时间转化为毫秒
    let new_data = new Date(data + 7*24*60*60*1000)  //将过时时间设置为7天后
    //设置第一条 cookie
    document.cookie = 'name=张三;' + 'expires=' + new_data.toUTCString()
    //设置第二条 cookie
    document.cookie = 'age=19;' + 'expires=' + new_data.toUTCString()
</script>

2、查看cookie

那么咱们如何查看浏览器上的cookie呢？这就很是简单了

<script>

    console.log(document.cookie)
    
</script>

能够看到返回的是一串字符串， 每一个cookie由分号隔开

若是咱们想要获取cookie中某个单独的 cookie，咱们能够用正则进行匹配

<script>
    // name=张三 ; age=19
    
    let re = new RegExp("\s?" + "name" + "=([^;]+)(;|$)")
    console.log(document.cookie.match(re)[1])

</script>

咱们来看一下输出的值：

这样就获得了咱们想要查询的单个cookie值

3、删除cookie

设置cookie是设置了一个cookie值并给它一个过时时间，这样 cookie才不会由于关闭浏览器而立马失效。因此删除 cookie 咱们只须要给该cookie设置一个比如今时间还早的时间让cookie过时。

<script>
    let data = new Date().getTime()   //先将此时的时间转化为毫秒
    let old_data = new Date(data - 24*60*60*1000) //将过时时间设为24小时前
    document.cookie = 'name=张三;' + 'expires=' + old_data.toUTCString()
</script>

咱们只须要给咱们须要删除的 cookie 设置一个过时时间为比如今的时间还早的时间，就能够删除这个cookie

删除后从新打开网页，咱们能够看到 名称为 name 的 cookie 已经被删除了

4、封装cookie操做

操做cookie有这么多方法， 咱们对他们进行封装， 方便咱们使用他们。

• 封装设置cookie的函数

<script>
   
	 //设置cookie
	 function setCookies(obj, limitTime) {
	     let data = new Date( new Date().getTime() + limitTime*24*60*60*1000 ).toUTCString()
	
	     for(let i in obj) {
	         document.cookie = i + '=' + obj[i] + ';expires=' + data
	     }
	
	 }
    
</script>

让咱们来使用一下setCookies函数

// 第一个参数为对象，用键值对的形式传入咱们想设置的cookie名和值
// 第二个参数为过时时间，单位为天
setCookies({
	name: '张三',
    age: 19,
    like: '羽毛球'
 }, 7)

• 封装查看cookie函数

//查看cookie
	function searchCookie(cookieName) {
	    let re = new RegExp("\s?" + cookieName + "=([^;]+)(;|$)")
	    return document.cookie.match(re)[1]
	}

让咱们来使用一下 searchCookie 函数

// 该函数只有一个参数，即咱们须要查询的cookie名称，而后返回一个值
let cookieValue = searchCookie(name)
console.log(cookieValue)

// 张三

• 删除cookie

//删除cookie
	function removeCookies(cookieList) {
	    let data = new Date(new Date().getTime() - 24*60*60*1000).toUTCString()
	    for(let i in cookieList) {
	        document.cookie = cookieList[i] + '= ;' + 'expires=' + data
	    }
	}

让咱们来使用一下 removeCookies 函数

//该函数只有一个参数，传入一个数组，每一个元素为咱们想要删除的cookie名
removeCookies(['name', 'age'])

结束语

好了，前端设置cookie的简单实用就讲到这里了， 看完的小伙伴能够赶忙本身动手试一试啦， 不要一看就会，一作就废哦~ 咱们下个文章再见吧~