Cookie

Speaking of Cookie, Whether as front-end developers or back-end developers are not unfamiliar , As one of the oldest 、 The most stable form of client storage , Even in the current era when various new client storage technologies emerge in endlessly , It still has its place .Cookie Use HTTP header send out , Specifically, it is called “Cookie” Of HTTP header, Each request will be sent by the browser to the server , At the same time, it is sent from the server to the browser , It is a form of two-way transmission . 
=== Request Headers ===

......

Cookie: AGL_USER_ID=f695f47d-f643-46cec-bf63-6255asdasdqwe4b3a24

... ......
before , Each domain name can only have at most 20 individual Cookie, But today's browsers seem to have removed this limitation （ The browser has no restrictions on what it can have Cookie Number ）, But the best practice is every domain name 50 individual 、 The total size is 4KB Of Cookie Is safe （Cookie Too much may cause the background service to report errors ）.
Every Cookie Corresponding to a unique domain name . This means that A Set on the website domain name Cookie Value cannot be in B Site use . So as to ensure the safety of the website to a certain extent , After all, no one wants other websites to affect the use of their own websites Cookie. in addition Cookie It can also correspond to a unique subdomain . for example , map.baidu.com yes baidu An independent subdomain of the website . You can create only map.baidu,com Readable Cookie, You can also create www.baidu.com and map.baidu.com All can be read Cookie
 
1、 establish Cookie
 
     Cookie The default is No API Of . To use Cookie Words , Just write the following code in the code . You can create a Cookie 
1 document.cookie = 'cookname=cookievalue' //  default setting

      also . You can also set Cookie The expiration time of . All we need to do is Cookie Use a semicolon after the value and then append a exprires The keyword of is equal to one time 

document.cookie = 'cookname=cookievalue;expires=Mon Jul 04 2022 16:36:24 GMT'

    In addition, it can be further expanded , Specify the Cookie Only valid for a domain name , as follows , The Cookie Only when the domain name is www.xxx.com In the website of . Specifically, it should be set according to the needs of your project
  
document.cookie = 'cookname=cookievalue;expires=Mon Jul 04 2022 16:36:24 GMT; domain=www.xxx.com'
2、 Read Cookie
 
    Cookie Reading is relatively much simpler , We just have to pass document.cookie You can get the settings on the website Cookie, 

document.cookie

3、 Delete Cookie
 
　　 If you want to delete Cookie If you have to , Just set the expiration time to the past time （ The name must match the one you want to delete Cookie Consistent names ）
　　 

document.cookie = 'cookname=cookievalue; expires=Thu, 01 Jan 1970 00:00:00 GMT'

Simple version package 

//  Simple packaging 

    const CookieUtile = {

        //  Set up 

        setCookie(key, value, time) {

            const date_ = new Date()

            date_.setDate(date_.getDate() + time) //  current time + Expiration time 

            document.cookie = key + '=' + value + ';expires=' + date_ //  Write to document

        },

        //  Set up 

        getCookie(key) {

            const CookieArray = document.cookie.split(';')  //  Multiple cookie adopt ; Split into multiple by ' key = value ' Array of components 

            for (let i = 0; i < array.length; i++) {

                const newCookieArray = CookieArray[i].split('=') // Remove the equal sign in the middle    Get a new array with only key values 

                const newCookieKey = newCookieArray[0].replace(/^\s/, '') //  Remove multiple cookie When saving value, it may appear cookie There is a space in front of the value name of 

                if (newCookieKey == key) {

                    return newCookieArray[1]

                }

                 return ''

            }

        },

        //  Delete 

        getCookie(key) {

            this.setCookie('name', '', -1);

        }

    }
 Talk about client storage technology Cookie More related articles in this article 
  1.  Common browser side storage technology ：cookie
     working principle : cookie It is stored in the user's hard disk , Every time a user visits a site ,Web Applications can read Cookie Information contained . When the user visits the site again , The browser will search the local hard disk for the URL The associated Cookie. ...
  2. HTML5 Client storage of （Storage）
     About client storage technology storage One . About clients ( browser ) Storage technology The first thing you can think of about browser storage technology is cookie, About cookie Its original intention is to solve the problem of client identification , Small amount of information can be stored (4k about ) ...
  3.  Conversational Technology （ Cookie ,Session）
     Conversational Technology :     conversation : The browser accesses the server , Send multiple requests , Accept multiple responses . Until one of them is disconnected . End of session .         solve the problem : You can use conversation Technology , Sharing data between multiple requests in a session .           ...
  4. 【 translate 】 Client storage （Client-Side Storage）
     Reprinted from : Many translators become translators : Wenlin link :http://www.zcfy.cc/article/660 original text :http://www.html5rocks.com/en/tutorials/offline/st ...
  5. Servlet Chapter five 【 Introduce conversation Technology 、Cookie Of API、 Detailed explanation 、 application 】
     What is conversational technology Basic concepts : It means that the user opens a browser , Visit a website , As long as you don't close the browser , No matter how many hyperlinks the user clicks , How many resources to visit , Until the user closes the browser , The whole process is called a conversation . Why do we use conversation Technology ...
  6. Node.js_express_ Browser storage technology Cookie（ The server stores and manages a small amount of data in the browser ）
     Browser storage technology Cookie The server stores and manages a small amount of data in the browser solve http The problem of stateless protocol ( Cannot distinguish whether multiple requests are sent from the same client ) A web page is usually the most 20 One of the cookie, Every cookie ...
  7. H5 Local storage technology and its relationship with Cookie Comparison 
     The first part : H5 Local storage technology HTML5 Provides two new ways to store data on the client side . Let's look at the following example : example 1:var mySelection = {name:"car", amount: ...
  8. Web Client data storage learning notes ——Cookie
     Today's security of login access and web Client storage did some general learning , Decided to deepen understanding in this area , Recorded in the blog . The first contact is Cookie... WHAT? WHY? HOW? I'm learning cookie The name of ...
  9.  Client technology ：Cookie Server technology ：HttpSession
     Client technology :Cookie Server technology :HttpSession 07. 5、 ... and / android Basics / No comments   One . Conversational Technology 1. What is conversation : The customer opens a browser to visit a website , After the visit , Close the browser . this ...
  10. Servle Fourth articles （ Conversational technology cookie）
     Conversational Technology What is conversational technology Basic concepts : It means that the user opens a browser , Visit a website , As long as you don't close the browser , No matter how many hyperlinks the user clicks , How many resources to visit , Until the user closes the browser , The whole process is called a conversation . Why should we make ...
 Random recommendation 
  1. ajaxsearch The main points of 1
    ajaxsearch You have to put form Of class Defined as pagerForm, Can be in foot in submit Button to get the value 
  2. php Understanding of some common functions 
    mysql_result($res, $row, [$field=0]) Is to get the query result set One of them The content of the unit . among , $row Is the line offset , $field Is column offset , Or index , from 0 At the beginning . ...
  3. MySQL Take advantage of Ameoba Read and write separation 
    3 ameoba Installation configuration   3.1 Installation configuration JDK [[email protected] ~]# rpm -ivh jdk-7u67-linux-x64.rpm [[email protected] ~]# cd /usr/j ...
  4.  Customize your own linux Small system 
      Customize your own linux Small system One . Preface    linux Operating system to 1991.10.5 Since the birth of the U.S , Because of its open source and freedom, it has won the favor of many technology giants , Every linux Fans have contributed their part to it , No matter what ...
  5. typedef and define Specific differences 
      1) #define This is a preprocessing instruction , Simply replace the preprocessor . Do not check the correctness , It still cannot shut down and enter normally , There are only possible errors and errors when compiling the source code when it has been expanded . for example : #define PI 3.1 ...
  6. swift UILabel When multiple lines are displayed Calculation UILable Height （ Can be used for UILable Highly adaptive ）
     The code is as follows func heightForView(text:String, font:UIFont, width:CGFloat) -> CGFloat{ let label:UILabel = ...
  7. ORA-16032: parameter LOG_ARCHIVE_DEST_3 destination string cannot be translated Problem handling process 
    1, Phenomenon is oracle Start to report an error, such as the following : SQL> startup ORA-16032: parameter LOG_ARCHIVE_DEST_3 destination string cann ...
  8. C++ Primer note —— Nested class Local class 
    1. A nested class is a separate class , It has little to do with outer classes . In particular , Objects of outer classes and objects of nested classes are independent of each other . The object of a nested class does not contain any members defined by the outer class , There are also no nested class defined members in the objects of the outer class . 2. nesting ...
  9. windows Password policy 
    windows Configure password policy in domain environment : http://www.cnblogs.com/danzhang/p/3693024.html windows Configure password policy : https://jingyan.baid ...
  10. cracking the coding interview series C# Realization 
     The original content is transferred from :CTCI Interview series —— Google interviewer classic | Fast class network This series is C# Implementation version Google interviewer classic (CTCI) Catalog   1.1 Determine whether the characters in a string are unique 1.2 String flip 1.3 Remove ...