Understanding and using JavaScript Cookies
JavaScript Cookie plays an important role in caching. This article will give some introduction to it.
Cookies are pieces of data that are stored in text files on your computer.
When the web server sends a web page to the browser, the server will not record the user's information after the connection is closed.
The role of Cookie is to solve "how to record user information on the client":
When a user visits a web page, his name can be recorded in the cookie.
The next time the user visits this page, the user access record can be read in the cookie.
Cookies are stored as name/value pairs, as shown below:
username=John Doe
When the browser requests a web page from the server, the cookie belonging to the page will be added to the request. The server obtains user information in this way.
Use JavaScript to create cookies
JavaScript can use the document.cookie attribute to create, read, and delete cookies.
In JavaScript, create a cookie as follows:
document.cookie="username=John Doe";
You can also add an expiration time (in UTC or GMT time) to the cookie. By default, cookies are deleted when the browser is closed:
document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT";
You can tell the browser the path to the cookie using the path parameter. By default, the cookie belongs to the current page.
document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";
Read Cookies using JavaScript
In JavaScript, you can use the following code to read cookies:
var x = document.cookie;
document.cookie will return all cookies in the form of strings, type format: cookie1=value; cookie2=value; cookie3=value;
Use JavaScript to modify Cookie
In JavaScript, modify Cookies are similar to creating cookies as follows:
document.cookie="username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";
Old cookies will be overwritten.
Deleting Cookies Using JavaScript
Deleting cookies is very easy. You only need to set the expires parameter to the previous time, as shown below, set to Thu, 01 Jan 1970 00:00:00 GMT:
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
Note that you do not have to specify the value of the cookie when you delete it.
Cookie String
The document.cookie property looks like an ordinary text string, but it is not.
Even if you write a complete cookie string in document.cookie, when you re-read the cookie information, the cookie information is displayed in the form of name/value pairs.
If you set a new cookie, the old cookie will not be overwritten. The new cookie will be added to document.cookie, so if you re-read document.cookie you will get data like this:
cookie1=value; cookie2=value;
show All Cookies Create Cookie 1 Create Cookie 2 Delete Cookie 1 Delete Cookie 2
If you need to find a specific cookie value, you must create a JavaScript function to find the cookie value in the cookie string.
JavaScript Cookie Example
In the following example, we will create a cookie to store the visitor name.
First, when a visitor visits the web page, he will be asked to fill in his name. This name will be stored in the cookie.
The next time the visitor visits the page, he will see a welcome message.
In this example we will create 3 JavaScript functions:
Function to set cookie value
Function to get cookie value
Detect cookie value Function
Function to set cookie value
First, we create a function to store the visitor's name:
function setCookie(cname,cvalue,exdays){
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname + "=" + cvalue + "; " + expires;}Function analysis:
The above In the function parameters, the name of the cookie is cname, the value of the cookie is cvalue, and the expiration time of the cookie expires is set.
This function sets the cookie name, cookie value, and cookie expiration time.
Function to get cookie value
Then, we create a function user to return the value of the specified cookie:
function getCookie(cname){
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++)
{
var c = ca[i].trim();
if (c.indexOf(name)==0) return c.substring(name.length,c.length);
}
return "";}Function analysis:
Parameters of cookie name for cname.
Create a text variable for retrieving the specified cookie:cname "=".
Use semicolons to split the document.cookie string, and assign the split string array to ca (ca = document.cookie.split(';')).
Loop through the ca array (i=0;i If the cookie is found (c.indexOf(name) == 0), return the cookie value (c.substring(name.length,c.length). If the cookie is not found, Returns "". Function to detect cookie value Finally, we can create a function that detects whether the cookie is created. If the cookie is set, a greeting message will be displayed. . If the cookie is not set, a pop-up window will be displayed to ask the visitor's name, and the setCookie function will be called to store the visitor's name for 365 days: Complete example Example 本篇对相关cookie的相关知识做出了一些了解，更多的学习资料清关注php中文网即可观看。 相关推荐： JavaScript typeof, null, 和 undefined的相关知识 The above is the detailed content of Understanding and using JavaScript Cookies. For more information, please follow other related articles on the PHP Chinese website!function checkCookie(){
var username=getCookie("username");
if (username!="")
{
alert("Welcome again " + username);
}
else
{
username = prompt("Please enter your name:","");
if (username!="" && username!=null)
{
setCookie("username",username,365);
}
}}function setCookie(cname,cvalue,exdays){
var d = new Date(); d.setTime(d.getTime()+(exdays*24*60*60*1000)); var expires = "expires="+d.toGMTString(); document.cookie = cname+"="+cvalue+"; "+expires;}function getCookie(cname){
var name = cname + "="; var ca = document.cookie.split(';'); for(var i=0; i<ca.length; i++) {
var c = ca[i].trim(); if (c.indexOf(name)==0) { return c.substring(name.length,c.length); }
}
return "";}function checkCookie(){
var user=getCookie("username"); if (user!=""){
alert("欢迎 " + user + " 再次访问"); }
else {
user = prompt("请输入你的名字:",""); if (user!="" && user!=null){
setCookie("username",user,30); }
}}
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Where are video files stored in browser cache?
Feb 19, 2024 pm 05:09 PM
Which folder does the browser cache the video in? When we use the Internet browser every day, we often watch various online videos, such as watching music videos on YouTube or watching movies on Netflix. These videos will be cached by the browser during the loading process so that they can be loaded quickly when played again in the future. So the question is, in which folder are these cached videos actually stored? Different browsers store cached video folders in different locations. Below we will introduce several common browsers and their
How to view and refresh dns cache in Linux
Mar 07, 2024 am 08:43 AM
DNS (DomainNameSystem) is a system used on the Internet to convert domain names into corresponding IP addresses. In Linux systems, DNS caching is a mechanism that stores the mapping relationship between domain names and IP addresses locally, which can increase the speed of domain name resolution and reduce the burden on the DNS server. DNS caching allows the system to quickly retrieve the IP address when subsequently accessing the same domain name without having to issue a query request to the DNS server each time, thereby improving network performance and efficiency. This article will discuss with you how to view and refresh the DNS cache on Linux, as well as related details and sample code. Importance of DNS Caching In Linux systems, DNS caching plays a key role. its existence
Speed up your applications: A simple guide to Guava caching
Jan 31, 2024 pm 09:11 PM
A Beginner's Guide to Guava Cache: Speed Up Your Applications Guava Cache is a high-performance in-memory caching library that can significantly improve application performance. It provides a variety of caching strategies, including LRU (least recently used), LFU (least recently used), and TTL (time to live). 1. Install Guava cache and add the dependency of Guava cache library to your project. com.goog
Will HTML files be cached?
Feb 19, 2024 pm 01:51 PM
Title: Caching mechanism and code examples of HTML files Introduction: When writing web pages, we often encounter browser cache problems. This article will introduce the caching mechanism of HTML files in detail and provide some specific code examples to help readers better understand and apply this mechanism. 1. Browser caching principle In the browser, whenever a web page is accessed, the browser will first check whether there is a copy of the web page in the cache. If there is, the web page content is obtained directly from the cache. This is the basic principle of browser caching. Benefits of browser caching mechanism
Advanced Usage of PHP APCu: Unlocking the Hidden Power
Mar 01, 2024 pm 09:10 PM
PHPAPCu (replacement of php cache) is an opcode cache and data cache module that accelerates PHP applications. Understanding its advanced features is crucial to utilizing its full potential. 1. Batch operation: APCu provides a batch operation method that can process a large number of key-value pairs at the same time. This is useful for large-scale cache clearing or updates. //Get cache keys in batches $values=apcu_fetch(["key1","key2","key3"]); //Clear cache keys in batches apcu_delete(["key1","key2","key3"]);2 .Set cache expiration time: APCu allows you to set an expiration time for cache items so that they automatically expire after a specified time.
The relationship between CPU, memory and cache is explained in detail!
Mar 07, 2024 am 08:30 AM
There is a close interaction between the CPU (central processing unit), memory (random access memory), and cache, which together form a critical component of a computer system. The coordination between them ensures the normal operation and efficient performance of the computer. As the brain of the computer, the CPU is responsible for executing various instructions and data processing; the memory is used to temporarily store data and programs, providing fast read and write access speeds; and the cache plays a buffering role, speeding up data access speed and improving The computer's CPU is the core component of the computer and is responsible for executing various instructions, arithmetic operations, and logical operations. It is called the "brain" of the computer and plays an important role in processing data and performing tasks. Memory is an important storage device in a computer.
How to save video files from browser cache to local
Feb 23, 2024 pm 06:45 PM
How to Export Browser Cache Videos With the rapid development of the Internet, videos have become an indispensable part of people's daily lives. When browsing the web, we often encounter video content that we want to save or share, but sometimes we cannot find the source of the video files because they may only exist in the browser's cache. So, how do you export videos from your browser cache? This article will introduce you to several common methods. First, we need to clarify a concept, namely browser cache. The browser cache is used by the browser to improve user experience.
Caching mechanism and application practice in PHP development
May 09, 2024 pm 01:30 PM
In PHP development, the caching mechanism improves performance by temporarily storing frequently accessed data in memory or disk, thereby reducing the number of database accesses. Cache types mainly include memory, file and database cache. Caching can be implemented in PHP using built-in functions or third-party libraries, such as cache_get() and Memcache. Common practical applications include caching database query results to optimize query performance and caching page output to speed up rendering. The caching mechanism effectively improves website response speed, enhances user experience and reduces server load.
