VUE前端cookie簡(jiǎn)單操作
更新時(shí)間：2017年10月17日 16:05:20 作者：countofdane
這篇文章主要為大家詳細(xì)介紹了VUE前端cookie簡(jiǎn)單操作代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
如下是簡(jiǎn)單cookie操作，當(dāng)前僅限前端實(shí)例，具體內(nèi)容如下
要注意的有兩點(diǎn)：
1、cookie內(nèi)容存貯的名稱(chēng)
2、刪除cookie是通過(guò)設(shè)置過(guò)期為過(guò)去時(shí)間實(shí)現(xiàn)的
<body>
<div id="app">
<button @click="clearCookie()">
清除cookie
</button>
</div>
</body>
<script>
let app = new Vue({
el: "#app",
data: {
},
created: function () {
this.checkCookie();
},
methods: {
//設(shè)置cookie
setCookie: function (cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires=" + d.toUTCString();
console.info(cname + "=" + cvalue + "; " + expires);
document.cookie = cname + "=" + cvalue + "; " + expires;
console.info(document.cookie);
},
//獲取cookie
getCookie: function (cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1);
if (c.indexOf(name) != -1) return c.substring(name.length, c.length);
}
return "";
},
//清除cookie
clearCookie: function () {
this.setCookie("username", "", -1);
},
checkCookie: function () {
var user = this.getCookie("username");
if (user != "") {
alert("Welcome again " + user);
} else {
user = prompt("Please enter your name:", "");
if (user != "" && user != null) {
this.setCookie("username", user, 365);
}
}
}
}
})
</script>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了圖解Vue的響應(yīng)式原理，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了vue的傳參方式和router使用技巧,本文給大家列舉了好幾種傳參方式，需要的朋友可以參考下2018-05-05
這篇文章主要介紹了vue項(xiàng)目中axios的封裝請(qǐng)求，axios?是一個(gè)輕量的HTTP客戶(hù)端，它基于?XMLHttpRequest?服務(wù)來(lái)執(zhí)行?HTTP?請(qǐng)求，支持豐富的配置，下文更多詳細(xì)資料,需要的朋友可以參考一下2022-03-03
這篇文章主要介紹了Vue框架TypeScript裝飾器使用指南小結(jié)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
這篇文章主要介紹了Vue中computed和watch的區(qū)別，對(duì)Vue感興趣的同學(xué)，可以參考下2021-05-05
vue webpack開(kāi)發(fā)訪(fǎng)問(wèn)后臺(tái)接口全局配置的方法
今天小編就為大家分享一篇vue webpack開(kāi)發(fā)訪(fǎng)問(wèn)后臺(tái)接口全局配置的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要為大家分享了vue開(kāi)發(fā)心得和技巧,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
Vue使用Element實(shí)現(xiàn)增刪改查+打包的步驟
這篇文章主要介紹了Vue使用Element實(shí)現(xiàn)增刪改查+打包的步驟，幫助大家更好的理解和學(xué)習(xí)vue框架，感興趣的朋友可以了解下2020-11-11
使用vue實(shí)現(xiàn)多規(guī)格選擇實(shí)例（SKU）
這篇文章主要介紹了使用vue實(shí)現(xiàn)多規(guī)格選擇實(shí)例（SKU），文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
vue/cli3.0腳手架部署到nginx時(shí)頁(yè)面空白的問(wèn)題及解決
這篇文章主要介紹了vue/cli3.0腳手架部署到nginx時(shí)頁(yè)面空白的問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10