What is SessionStorage and LocalStorage?

Like cookies,SessionStorage and LocalStorage are used to store data in web pages

2.Cookie, SessionStorage, and LocalStorage

Life cycle (in the same browser): Cookie: Expires after the browser is closed by default. However, you can also set the expiration time. SessionStorage: valid only in current session (window), cleared after closing the window or browser, cannot set expiration time LocalStorage: permanent storage capacity unless cleared: Cookie: limited in size (about 4KB) and compound (20-50) SessionStorage: limited in size (about 5M) LocalStorage: limited in size (about 5M) network request: SessionStorage: Only stored in the browser, does not participate in the communication with the server LocalStorage: Only stored in the browser, does not participate in the communication with the server

3. Application scenarios of Cookie, SessionStorage, and LocalStorage

Cookie: determines whether the user is logged in. SessionStorage: Form data LocalStorage: shopping cart

4. Pay attention to the point

Regardless of which storage method you use, remember not to store sensitive data directly locally,

5. Add, delete, modify and check

Open the console to see the effect. Here is an example of sessionStorage. If LocalStorage is needed, change sessionStorage to LocalStorage.

<template>
  <div>
    <button @click="add">new</button>
    <button @click="del">delete</button>
    <button @click="date">Modify the</button>
    <button @click="get">To obtain</button>
    <button @click="clear">Delete all saved data</button>
  </div>
</template>

<script>
export default {
  methods: {
    add() {
      sessionStorage.setItem("name"."Shanzhu");
      sessionStorage.setItem("age"."18");
    },
    del() {
      sessionStorage.removeItem("name");
    },
    date() {
      sessionStorage.setItem("name"."Sessheng pill");
    },
    get() {
      let data = sessionStorage.getItem("name");
      console.log(data);
    },
    clear(){ sessionStorage.clear(); ,}}};</script>
Copy the code