A, cookie is a piece of text in the client browser to store information
1. 4KB size limit
The number of cookie 2. a site about 50
3. cookie into a period of risk
4. You can set the validity period, the default is the end of painting
5. General the root directory
6. You can set the domain name
7 may be provided secure, https access (secure attributes: When set to true, indicates Cookie created are transferred to the server in a secure form, i.e. only in the HTTPS connection is transmitted to the server for the browser session authentication , if the HTTP connection is not transmitting information, not the specific content to be stolen the Cookie.)
Full format of the cookie
document.cookie = 'name = vlaue; expires = date object; path = /; domain = domain; Secure;
native cookie package :
1 function createCookie(key,value,expires){ 2 var cookieText = encodeURIComponent(key) + '=' + encodeURIComponent(value) + ';path=/'; 3 if(!isNaN(expires)){ 4 var date = new Date(); 5 date.setDate(date.getDate() + expires); 6 cookieText += ';expires=' + date; 7 } 8 document.cookie = cookieText; 9 } 10 function getCookie(key){ 11 var arr = document.cookie.split('; '); 12 for(var i = 0,len = arr.length;i < len;i ++){ 13 var list = arr[i].split('='); 14 if(encodeURIComponent(key) === list[0]){ 15 return decodeURIComponent(list[1]); 16 } 17 } 18 } 19 function removeCookie(key){ 20 document.cookie = encodeURIComponent(key) + '=;path=/;expires=' + new Date(0); 21 }
Two, vue-cookie
others vue-cookie is packaged cookie, by introducing npm be used to download, npm address: https: //www.npmjs.com/package/vue-cookies,
npm downloaded to the project
nper i-view cookies -D
After the project is downloaded to vue, create a new file is written in the file cookie.js
Import view from 'View' import VueCookies from 'sight-cookies Vue.use (VueCookies)
Then referenced in the main.js
1 import './cookie.js'
This cookie can be called directly in the various components
Set cookie
the this . $ cookies.set (keyName, value, time, path, domain, secure) // KeyName cookie is key, value is the corresponding value, time why the time is automatically deleted, path for the storage path, domain is the domain name, secure as Do you want to transfer in a safe manner
If it is a simple project, usually only used in the first four
the this $ cookies.set. ( 'test', '{a: 1, b: 2}', 0, '/') meaning // create a cookie named test, a value of {a: 1, b: 2}, the time is 0, that the end of the session to delete cookie, stored in the root directory /
vue-cookie time has the following format
1. Direct digital set: 0, 1, -1. I.e., 0 is set to the end of the session cookie is deleted, i.e., 1 second after setting delete, i.e. the cookie provided -1 never deleted, that is, 60 + 30 1 minute 30 seconds, that is 60 * 60 After 1 hour, 1 to on behalf of one second
2. Set a string, such as: "1s" shall be deleted after one second, "2min" is two minutes, "3H" is 3 hours, "4D" is four days, "5m" is 5 months, " 6y "is 6 years
3 may be customized settings such as time:
. 1 the this $ cookies.set ( 'Test', '{A:. 1, B: 2}', -. 1). // never deleted . 3 the this . Cookies.set $ ( 'Test', '{A:. 1, B: 2} ', 60) // one minute after deleting . 5 the this $ cookies.set (.' Test ',' {a:. 1, B: 2} ',' 10s') // 10 seconds deleted . 7 the this . $ cookies.set ( 'the Test', '{A: 1, b: 2}', new new a Date (2019,9,13) .toUTCString ()) // 2019 Nian 10 Yue 13 Ri delete, new Date set month It is starting from 0
1 the this . $ Cookies.get (keyName) // KeyName is to set the cookie's name, vue-cookie cookie will automatically be converted to json object format
cookie deletion
1 this.$cookies.remove(keyName)
Determine whether there is local support for this cookie
1 this.$cookies.isKey(keyName)
Get all the local name of the cookie
1 this.$cookies.keys()
Three, js-cookie
js-cookie npm also been already written in the cookie tools, npm address: https://www.npmjs.com/package/js-cookie ;
Download command npm
1 cnpm i js-cookie -D
Vue may also be used, the following is used react in
After a successful download command files referenced in main.js react in the project
jsCookie from Import 'JS-Cookie' ; . $ React.Component.prototype Cookie = jsCookie; // add to the prototype, so that each component can be used
js-cookie is very simple to use
Set cookie
this.$cookie.set('name', 'value');
Set deletion time
the this . Cookie.set $ ( 'name', 'value', {Expires:. 7, path: '/'}); // this case deletes cookie. 7 days, may not be provided, the default is automatically deleted after the session cookie
Get cookie
the this . cookie.get $ ( 'name'); // will be called pure name string value of the this $ cookie.getJSON ( 'name');. // will get a target data format json the this . cookie.get $ (); the this . $ cookie.getJSON (); // If no key name will acquire all of the cookie
Delete cookie
1 this.$cookie..remove('name');