This is the 17th day of my participation in Gwen Challenge

LocalStorage and Event Delegation

Today this module title a look on the focus, it sounds like a bit of a lofty appearance, after all, the interview knowledge points, belong to the old opponent, very popular – local storage. Then the corresponding content of today’s module must be related to that, and you can guess the scope of the practice in general. Today, I mainly completed a module similar to Todo List. When we input a value, we can click Add to add this data, so as to round and round, repeat the input, and the value will not be lost every time we refresh. Let’s focus on practice first.

1. Effect display

1.index-START.html

2.index-FINISHED.html

Second, the implementation

The final code

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>LocalStorage</title> <link rel="stylesheet" href="style.css"> </head> <body> <! -- Fish SVG Cred: https://thenounproject.com/search/?q=fish&i=589236 --> <svg xmlns="http://www.w3.org/2000/svg" XMLNS: xlink = "http://www.w3.org/1999/xlink" version = "1.1" x = "0 px" y = "0 px" viewBox = "0 0 512 512" enable - background = "new 0 0 512 512" xml:space="preserve"><g><path D = "M495.9 H16.1 c - 5.2-425.3, 0-10.1, 2.9-12.5, 7.6-2.4 c, 4.7-2.1, 10.3, 0.9, 14.6 l39, c2.6 56.4, 3.8, 7,6.1, 11.6, 6.1 h401.7 C4.6, 0, 9-2.3, 11.6-6.1 l39 56.4 c3-4.3, 3.3-9.9, 0.9 14.6 C506, 428.2, 501.1, 425.3, 495.9, 425.3 z M449.4, 481.8 H62.6 L43, 453.6 H469 L449.4, 481.8 z "/ > < path D = "M158.3, 122 c7. 8,0,14.1-6.3, 14.1-14.1 V43.4 c0-7.8-6.3-14.1-14.1-14.1 - c - 7.8, 0-14.1, 6.3, 14.1, 14.1 v64.5 C144.2, 115.7, 150.5, 122158.3, 122 z "/ > < path D = ",14.1 M245.1, 94.7 c7.8, 0-6.3, 14.1-14.1 V16.1 c0-7.8-6.3-14.1-14.1-14.1 C237.3, 2231,8.3, 231,16.1 v64.5 C231, 88.4, 237.3, 94.7, 245.1, 94.7 z "/ > < path D = "M331.9, 122 c7. 8,0,14.1-6.3, 14.1-14.1 V43.4 c0-7.8-6.3-14.1-14.1-14.1 - s - 14.1, 6.3-14.1, 14.1 v64.5 C317.8, 115.7, 324.1, 122331.9, 122 z "/ > < path D = "M9.6, c5.3 385.2, 2.8, 11.8, 1.9, 16.2-2.2 c56.7 l50.6-47.7, 46.5, 126.6, 71.9, 198.3, 71.9 c0, 0,0,0,0,0 C87.5, 0169.7-36.6, 231.4-103.2 c5-5.4, 5-13.8, 0-19.2 - c - 61.8-66.5-144-103.2-231.4-103.2 - c - 72, 0-142.2, 25.6 199,72.5 l - 50-47.1 C - 4.4-4.1-10.9-5-16.2-2.2 - c - 5.3, 2.8, 8.3, 8.7, 7.4, 14.6 l11.6, 75 l2. 2370.6 C1.3, 376.5, 4.2, 382.4, 9.6, 385.2 z M380.9, 230.8 C34.9, 14.3, 67.2, 35.7, 95.3, 63.6-10.1 c, 10-20.8, 19.2, 31.9, 27.5 c - 22.4-3.3-29.6-8.8-30.7-9.7 - c - 4-5.7-11.8-7.7-18.1-4.4 C - 6.9, 3.6-9.5, 12.2-5.9, c1.9 19.1, 3.5, 7.3, 10.3, 22.4, 16 c - 10.1, 5.7-20.5, 10.7-31.1, C352.4 15.1, 320.2, 352.4, 268.6, 380.9, 230.8 z L29.4 M36.3, 255.6, 27.7 c5.3,13.6 5, 5.1, 19.1, 0.3 c53.2-47.6, 120.7, 73.7, 190-73.7 c26.9,53.2 0, 3.9, 78.5, 11.3 C - 29.3, 44.6-29.3, 102,0,146.6 c - 25.3, 7.4, 51.6, 11.3, 78.5, 11.3, 0-136.3 - c - 69-26-189.4-73.2 - c - 2.7-2.4-13.4-6.3-19.1, 0.3 l - 30.1, 28 ,36.3. 3 l5.7-40 c42. 2293, 255.6, 36.3, 255.6 z "/ > < circle cx =" 398.8 "cy =" 273.8 "r =" 14.1 "/ > < / a > g < / SVG > < div class =" wrapper "> <h2>LOCAL TAPAS</h2> <p></p> <ul class="plates"> <li>Loading Tapas... </li> </ul> <! <form class="add-items" method="post" action="http://abc.com"> <input type="text" name="item" placeholder="Item Name" required> <input type="submit" value="+ Add Item"> </form> </div> <script> const addItems = document.querySelector('.add-items'); const itemsList = document.querySelector('.plates'); const items = JSON.parse(localStorage.getItem("items")) || []; function createList(plates = [], platesList) { platesList.innerHTML = plates.map((plate, i) => { return ` <li> <input type="checkbox" data-index=${i} id="item${i}" ${plate.done ? 'checked' : ''} /> <label for="item${i}">${plate.text}</label> </li> `; }).join(''); } createList(items,itemsList); function addItem(e){ e.preventDefault(); // let value = this.querySelector("input:first-child").value; let input = this.querySelector("[name=item]"); items.push({ text:input.value,done:false}); Localstorage.setitem ("items", json.stringify (items)); // Update localStorage information this.reset(); createList(items,itemsList); } function toggleItem(e){console.log(e.currenttarget);} function toggleItem(e){console.log(e.currenttarget.e.target); // Avoid repeated firing and only handle if (! e.target.matches('input')) return; // skip this unless it's an input let index = e.target.dataset["index"]; items[index].done = ! items[index].done; Localstorage.setitem ("items", json.stringify (items)); // Update localStorage information createList(items,itemsList); / / update the picture} addItems addEventListener (' submit ', addItem); itemsList.addEventListener('click', toggleItem); </script> </body> </html>Copy the code

Iii. Summary and review

Process decomposition

Implement the added list

    function createList(plates = [], platesList) {
    platesList.innerHTML = plates.map((plate, i) = > {
      return `
        <li>
          <input type="checkbox" data-index=${i} id="item${i}" ${plate.done ? 'checked' : ' '} />
          <label for="item${i}">${plate.text}</label>
        </li>
      `;
    }).join(' ');
  }
Copy the code

The index, checkbox, checkbox, checkbox, checkbox, checkbox, checkbox, checkbox, checkbox, checkbox, checkbox, checkbox

Fetch the contents of localStorage

First, after running the final code of the original author, enter a record, then press F12 to open the console panel, find the Application panel, and then localStorage under Storage on the left of it can see a record just entered.

Now let’s pull out the record in localStorage.

  const addItems = document.querySelector('.add-items');
  const itemsList = document.querySelector('.plates');
  const items = JSON.parse(localStorage.getItem("items")) || [];


  createList(items,itemsList);

Copy the code

The two parameters inside are the content for and the place to place the content.

We now have the contents of the record we entered earlier:

3. Add items to the list

function addItem(e){
    e.preventDefault();
    // let value = this.querySelector("input:first-child").value;
    let value = this.querySelector("[name=item]").value;
    let obj = items.push({ text,done:false});  // Update the js data
    localStorage.setItem("items",items);  // Update localStorage information
    createList(items,itemsList);  // Update the screen

}


addItems.addEventListener('submit', addItem);
Copy the code

But if you write like this, you will find that you can add entries, but localStorage is wrong.

Therefore, it should be modified like this:

    function addItem(e){
    e.preventDefault();
    // let value = this.querySelector("input:first-child").value;
    let input = this.querySelector("[name=item]");
    items.push({ text:input.value,done:false});  // Update the js data
    localStorage.setItem("items".JSON.stringify(items));  // Update localStorage information
    this.reset();
    createList(items,itemsList);  // Update the screen

}
Copy the code

4. Complete the module content (i.e. store)

    function toggleItem(e){
  console.log(e.currentTarget.e.target);
  // Avoid repeated triggering and only handle if it is input
  if(! e.target.matches('input')) return; // skip this unless it's an input
  let index = e.target.dataset["index"]; items[index].done = ! items[index].done;// Update the js data
  localStorage.setItem("items".JSON.stringify(items));  // Update localStorage information
  createList(items,itemsList);  // Update the screen
}


itemsList.addEventListener('click', toggleItem);
Copy the code

Module content complete.

4. Key and difficult points

localStorage

See the MDN documentation for the use of localStorage: developer.mozilla.org/zh-CN/docs/…

The advantage of localStorage

1. LocalStorage expands the 4K limit of cookies

2, localStorage will be able to store the first request data directly to the local, which is equivalent to a 5M size for the front-end page database, compared to cookie can save bandwidth, but this is only supported in the older version of the browser

The limitations of localStorage

1, the size of the browser is not uniform, and THE Internet Explorer version in IE8 or later only support the localStorage property

2. Currently, all browsers will limit the value type of localStorage to string, which requires some conversion for the common JSON object type in our daily life

3. LocalStorage is unreadable under the browser’s privacy mode

4, localStorage is essentially a string read, if the storage content will consume memory space, will lead to page card

5. LocalStorage cannot be captured by crawlers

The only difference between localStorage and sessionStorage is that localStorage is a permanent storage, whereas sessionStorage is a key/value pair that is cleared when the session ends

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

JavaScript 30-day Coding Challenge — Day 15

LocalStorage and Event Delegation

1. Effect display

1.index-START.html

2.index-FINISHED.html

Second, the implementation

The final code

Iii. Summary and review

Process decomposition

4. Key and difficult points

localStorage

JavaScript 30-day Coding Challenge — Day 15

LocalStorage and Event Delegation

1. Effect display

1.index-START.html

2.index-FINISHED.html

Second, the implementation

The final code

Iii. Summary and review

Process decomposition

4. Key and difficult points

localStorage

Related Posts

Look at the art and way of WEB animation from mobile terminal H5 production

React Primer iv: Use the React component

Vue project packaging optimization!!