jQuery needs to be introduced before using jquery.cookie.js:
<script src="/path/to/jquery.min.js"></script> <script src="/path/to/jquery.cookie.js"></script>
We can import these two files using a third-party resource library:
<script src="https://cdn.staticfile.org/jquery/3.4.0/jquery.min.js"></script> <script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
Instructions
Create cookies:
$.cookie('name', 'value');
If no expiration is specified, it will expire when the browser is closed.
Create a cookie and set it to expire after 7 days:
$.cookie('name', 'value', { expires: 7 });
Create a cookie and set the effective path of the cookie, which is the root directory of the website:
$.cookie('name', 'value', { expires: 7, path: '/' });
Note: By default, only the webpage that set the cookie can read the cookie. If you want a page to read a cookie set by another page, you must set the path of the cookie. The cookie's path is used to set the top-level directory that can read the cookie. Setting this path as the root directory of the website allows all web pages to read cookies from each other (generally do not set this way to prevent conflicts).
Read cookies:
$.cookie('name'); // => "value"
$.cookie('nothing'); // => undefined
Read all cookie information:
$.cookie(); // => { "name": "value" }
Delete cookies:
// If the cookie is successfully deleted, return true, otherwise return false $.removeCookie('name'); // => true $.removeCookie('nothing'); // => false // When path is used for writing, read You also need to use the same attribute (path, domain) $.cookie('name', 'value', { path: '/' }); // The following code [deletion failed] $.removeCookie('name'); / / => false // The following code [delete successfully] $.removeCookie('name', { path: '/' }); // => true
NOTE: When deleting a cookie, the exact same path, domain and security options used to set the cookie must be passed.
example
$(document).ready(function(){ $.cookie('name', 'runoob'); // 创建 cookie name = $.cookie('name'); // 读取 cookie $("#test").text(name); $.cookie('name2', 'runoob2', { expires: 7, path: '/' }); name2 = $.cookie('name2'); $("#test2").text(name2); });
After execution, we can view the cookie information in the browser, as shown in the following figure:
Parameter Description
raw
Default value: false.
By default, encoding and decoding are performed automatically when reading and writing cookies (using encodeURIComponent to encode and decodeURIComponent to decode). To turn off this feature set raw:true:
$.cookie.raw = true;
json
The data that sets the cookie is stored and read using json, so there is no need to use JSON.stringify and JSON.parse.
$.cookie.json = true;
expires
expires: 365
Defines the valid time of the cookie, the value can be a number (in days since the cookie was created) or a Date object. If omitted, the cookie created is a session cookie and will be deleted when the user exits the browser.
path
path: '/'
Default: Only the webpage that sets the cookie can read the cookie.
Defines valid paths for cookies. By default, the value of this parameter is the path of the web page that created the cookie (standard browser behavior).
If you want to access this cookie in the whole website, you need to set a valid path like this: path: '/'. If you want to delete a cookie with a valid path defined, you need to include this path when calling the function:
$.cookie('the_cookie', null,{ path: '/' });
domain
domain: 'example.com'
Default: The domain name owned by the web page that created the cookie.
secure
secure: true
Default value: false. If true, the transmission of cookies requires a secure protocol (HTTPS).