Json string

Json is primarily used for front – and back-end interaction and is a data format that is much easier to use than Xml

Json syntax

Can be used to represent: objects, arrays, simple data types, etc

  • {}Represents an object,[]Said array
  • Between keys and values:Separate, used between keys.Property name must be used""No.
  • The value should not be NaN, and the last bit of the attribute should not be left if there is no other attribute.

Json to object conversion

     JSONString to objectParse (JSON string) returns converted JS objects
Copy the code
Object to turnJSONstring'json.stringify () is used to convert a value to a JSON string
Copy the code

For example,

// "string" data in object form to JSON object
 let s = ` {" name ":" the onion ", "age" : 18} `;
 console.log(s)// String => {"name":" onion ","age":18}
 console.log(JSON.parse(s));// // Object: object
// Array "string" data to JSON objects
 let s = `,5,8,9 ` [1];
 console.log(s);// string => [1,5,8,9]
 console.log(JSON.parse(s));// Object: object
 -----------------------------------------------------------------------
 // Object to JSON string
 let s = {"name":"Onion"."age":18};
 console.log(JSON.stringify(s));// String => {"name":" onion ","age":18}
 // Array to JSON string
  let s = [1.5.8.9];
   console.log(JSON.stringify(s));// string => [1,5,8,9]
Copy the code

Pay attention to

  • When we convert, the object’s functions will be filtered out and won’t show up in our printed results;
  • Deep copy allows you to convert an object to a string and then back to an object.
  • Json cannot store Data objects. Do not have two attributes with the same name in the same object.
  • By default, json.stringify () outputs a string without Spaces and indents

Cookie

Cookie is to record the user information in the browser. When the page is opened in the server environment, we can obtain the user’s operation information through setting. For example, remember the user password when logging in, the information in the shopping cart on personal Taobao account and so on. Cookie validity can be session-level, long-term or set

How does it work?

  • We can get throughdoucument.cookieTo create, delete, modify, read.

Here’s an example of a small onion:

document.cookie = Name = "onion";
document.cookie = "age=18";
Copy the code

The results are as follows:

We find the Onions are too hot. I’d like to change potatoes to 😉

**document.cookie = Name = "onion";
document.cookie = Name = "potato";
document.cookie = "age=18";
Copy the code

The results are as follows:

Ate a period of time potato I discover potato also bad, I do not want, how to do? So how do we delete? In fact, careful friends found there is a session level, we can set an expiration date, this date is the expiration time can be, with the help ofexpiresThe keyword.

 document.cookie = "Name = potato; expires="+new Date('2021/11/25 03:58:20');
Copy the code

As a result, I will not show 😁

Localstorage

In H5, loclStorage and sessionStorage are added for local storage. Localstorage is permanent, sessionStorage is session level, here we focus on loclStorage.

The basic use

  • Use window.localstorage to operate localstorage(window can be omitted)
/ / add setItem
localStorage.setItem("name"."Onion");
/ / get the getItem method
localStorage.getItem("name"."Onion");
// Remove removeItem(" key-value pair ")
localStorage.removeItem("name");
/ / to empty the clear
localStorage.clear();
Copy the code

Example (remember username and password)

  • Requirements: After the user enters the user name and password, click the check box to remember the user name and password, so that the user does not need to re-enter the password when logging in next time.
User name:<input type="text" id="username">
  <br>
  密&nbsp;&nbsp;&nbsp;Code:<input type="password" id="pwd">
  <br>
  <span style="font-size: 14px;">Remember username and password:</span> 
  <input type="checkbox" id="remember">
Copy the code
    / / check box
    const remember = document.getElementById('remember');
    / / user name
    const username = document.getElementById('username');
    / / password
    const pwd = document.getElementById('pwd');
      
    remember.onclick = function(){
      if (remember.checked) {
        // Select to save the user name and password to local storage.
        localStorage.setItem("username",username.value);
        localStorage.setItem("pwd",pwd.value);
      } else {
        // The user name and password are deleted from the local storage
        localStorage.removeItem("username");
        localStorage.removeItem("pwd");
      }
      console.log();
    }
    // Each time the page is reopened, determine whether there is a value in the local store
    if (localStorage.getItem("username")) {
      // If there is a value, write the value to the input box.
      username.value = localStorage.getItem("username")
      pwd.value = localStorage.getItem("pwd");
      // The check box is selected by default
      remember.checked = true;
    }
Copy the code

Effect: Once we enter the password and username and click the check box, we don’t have to enter it again the next time we come in, because the data is saved here by ↓