Shulou(Shulou.com)06/02 Report--

This article is about how to use Json string + Cookie+localstorage in JS. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

1.Json string

Json is mainly used for front-end interaction and is a data format. Compared with Xml, it is more convenient to use.

1.1Json syntax

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

{} represents an object, and [] represents an array

Between keys and values: separation, separation between keys, property names must use the "" sign.

Do not use NaN as far as possible. If there is no other attribute, do not leave the last bit of the attribute.

Conversion between Json and object:

JSON string conversion object `JSON.parse (JSON string) returns converted js object `object to JSON string `JSON.stringify () is used to convert a value to JSON string `1.2 as an example

/ / transfer "string" data in object form to json object let s = `{"name": "onion", "age": 18}`; console.log (s) / / string = > {"name": "onion", "age": 18} console.log (JSON.parse (s)); / / object: "string" data in the form of object// array to json object let s = `[1pr 5, 8J 9]`; console.log (s) / / string = > [1 name 5, 8] 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 = [1meme 5p 8m 9]; console.log (JSON.stringify (s)); / / string = > [1m 5m 8J 9]

Note:

During the conversion, the functions of the object will be filtered out and will not reflect the results we printed.

When making a deep copy, you can first convert the object to a string, and then switch back to the object.

Json cannot store Data objects, and do not have two properties of the same name in the same object.

By default, there are no space and indent characters in the string output by JSON.stringify ()

2.Cookie

Cookie is to record the user information in the browser. The page opens in the server environment, and we can get the user's operation information by setting it. For example: remember the user's password when logging in, the information in the shopping cart on the personal Taobao account, and so on. The validity period of Cookie can be session-level, long-term or time-limited.

2.1 how do I use it?

We can create, delete, modify, and read through doucument.cookie.

Take a look at the example:

[xss_clean] = "name= onion"; [xss_clean] = "age=18"

The results are as follows:

We found the onions too hot. I'd like to change the potatoes:

* * [xss_clean] = "name= onion"; [xss_clean] = "name= potato"; [xss_clean] = "age=18"

The results are as follows:

After eating potatoes for a period of time, I found that potatoes are not good. I don't want them anymore. What should I do? So how do we delete it? In fact, careful friends found that there is a session level, we can set a validity period, this date is the expiration time on it, with the help of the expires keyword.

[xss_clean] = "name= Potato; expires=" + new Date ('2021-11-25 03rig 58purl 20'); 3.Localstorage

H5 added loclstorage and sessionStorage for local storage. The localstorage validity period is permanent and the sessionStorage validity period is at the session level, so let's focus on loclstorage.

3.1 basic use

Use window.localstorage to manipulate localstorage (window can be omitted)

/ / add setItemlocalStorage.setItem ("name", "onion"); / / get getItemlocalStorage.getItem ("name", "onion"); / / delete removeItem ("key-value pair") localStorage.removeItem ("name"); / / clear clearlocalStorage.clear (); 3.2case (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. There is no need to re-enter the user name and password the next time you log in.

User name:

Secret code:

Remember the username password: / / check box const remember = document.getElementById ('remember'); / / username const username = document.getElementById (' username'); / / password const pwd = document.getElementById ('pwd'); remember.onclick = function () {username (remember.checked) {/ / selected to place the username and password in the local storage. LocalStorage.setItem ("username", username.value); localStorage.setItem ("pwd", pwd.value);} else {/ / changed from selected to unselected, removing localStorage.removeItem ("username"); localStorage.removeItem ("pwd");} console.log () from the local store. } / / each time the page is reopened, determine whether there is a value if (localStorage.getItem ("username")) {/ / in the local storage, and write the value to the input box. Username.value = localStorage.getItem ("username") pwd.value = localStorage.getItem ("pwd"); / / the check box defaults to remember.checked = true;}

Effect: once we enter the password and user name, click the check box, we do not have to enter it again the next time we come in, because the data is stored here in the ↓

Thank you for reading! This is the end of the article on "how to use Json string + Cookie+localstorage in JS". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.