why does it say the operation is not secure for the local storage in javascript?

74
February 05, 2018, at 12:13 PM

code for html, css and javascript of the to-do list application. don't understand why the local storage doesn't work and it also has a few other errors that need de-bugging. please help and I suggest you copy the code and run it to see the problems yourself. your help would be much appreciated. I used a youtube video to help me make this application but the code didn't work on my Mac so I had to adjust the code so that it would work for me. the functionality of the application is to add items, move them into the to-do or completed section by completing them, removing the items and storing the data in the local storage. it does most of them apart from the storing and there are other errors in the code that need de-bugging. once the code is ran then you can see the problems and what needs to be fixed.

    var data = (localStorage.getItem('todoList')) ? JSON.parse(localStorage.getItem('todoList')):{ 
      todo: [], 
      completed: [] 
    }; 
 
    // Remove and complete in PNG format 
 
    var removePNG = "images/remove_icon.png" 
    var completePNG = "images/done_icon.png" 
 
    //User clicked on the add button 
    //If there is any text inside the item field, add that text to the todo list 
 
    renderTodoList(); 
 
    document.getElementById('add').addEventListener('click', function () { 
      var value = document.getElementById('item').value; 
      if (value) { 
        addItem(value); 
      } 
    } 
 
    document.getElementById(item).addEventListener('keydown', function (e) { 
      var value = this.value; 
      if (e.code === 'Enter' && value) { 
        addItem(value); 
    } 
 
    function addItem() { 
      addItemToDOM(value) 
      document.getElementById('item').value = ''; 
 
      data.todo.push(value); 
      dataObjectUpdated(); 
    } 
 
    function renderTodoList() { 
      if (!data.todo.length && !data.completed.length) return; 
 
      for (var i = 0; i <data.todo.length; i++) { 
        var value = data.todo[i]; 
        addItemToDOM(value); 
      } 
    } 
 
      for (var j = 0; j <data.completed.length; j++) { 
        var value = data.completed[j]; 
        addItemToDOM(value, true); 
      } 
    } 
 
    function dataObjectUpdated() { 
      localStorage.setItem('todoList', JSON.stringify(data)); 
    } 
 
    function removeItem() { 
      var item = this.parentNode.parentNode; 
      var parent = item.parentNode; 
      var id = parent.id; 
      var value  = item.innerText; 
 
      if (id === 'todo') { 
        data.todo.splice(data.todo.indexOf(value), 1); 
      } else { 
        data.completed.splice(data.completed.indexOf(value), 1); 
      } 
      dataObjectUpdated(); 
 
      parent.removeChild(item); 
    } 
 
    function completeItem() { 
      var item = this.parentNode.parentNode; 
      var parent = item.parentNode; 
      var id = parent.id; 
      var value  = item.innerText; 
 
      if (id === 'todo') { 
        data.todo.splice(data.todo.indexOf(value), 1); 
        data.completed.push(value); 
      } else { 
        data.completed.splice(data.completed.indexOf(value), 1); 
        data.todo.push(value); 
      } 
 
    // Check if the item should be added to the completed list or to be e-added to the todo list 
 
      var target = (id === 'todo') ? document.getElementById('completed'):document.getElementById('todo'); 
 
      parent.removeChild(item); 
      target.insertBefore(item, target.childNodes[0]); 
    } 
 
    // Adds a new item to the todo list 
 
    function addItemToDOM(text, completed) { 
 
      var list = (completed) ? document.getElementById('completed'):document.getElementById('todo'); 
 
      var item = document.createElement('li'); 
      item.innerText = text; 
 
      var buttons = document.createElement('div'); 
      buttons.classList.add('buttons'); 
 
      var remove = document.createElement('button'); 
      remove.classList.add('remove'); 
      remove.innerHTML = removePNG; 
 
      // Add click event for removing the item 
 
      remove.addEventListener('click', removeItem); 
 
      var complete = document.createElement('button'); 
      complete.classList.add('complete'); 
      remove.innerHTML = completePNG; 
 
      // Add click event for completing the item 
 
      complete.addEventListener('click', completeItem); 
 
      buttons.appendChild(remove); 
      buttons.appendChild(complete); 
      item.appendChild(buttons); 
 
      list.insertBefore(item, list.childNodes[0]); 
    }
    @charset "UTF-8"; 
 
    body { 
      background: #edf0f1; 
    } 
 
    body, input, button { 
      font-family: 'Roboto', sans-sans-serif; 
    } 
 
    header { 
      width: 100%; 
      height: 55px; 
      position: fixed; 
      padding: 10px 19px 6px 9px; 
      top: 0; 
      left: 0; 
      z-index: 5; 
      background: #25b99a; 
      box-shadow: 0px 2px 4px rgba(44,62,80,0.15); 
    } 
 
    header input { 
      width: 100%; 
      height: 50px; 
      color: #ffffff; 
      font-size: 15px; 
      font-weight: 400; 
      text-indent: 20px; 
 
      background: rgba(255,255,255,0.2); 
      border-top-left-radius: 5px; 
      border-bottom-left-radius: 5px; 
      border-top-right-radius: 25px; 
      border-bottom-right-radius: 25px; 
      border: 0px; 
      box-shadow: none; 
      outline: none; 
 
      -webkit-appearance: none; 
      -moz-appearance: none; 
      -ms-appearance: none; 
      -o-appearance: none; 
      appearance: none; 
    } 
 
    header input-webkit-input-placeholder { 
      color: rgba(255,255,255,0.75); 
    } 
 
    ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ 
      color: white; 
    } 
    ::-moz-placeholder { /* Firefox 19+ */ 
      color: white; 
    } 
    :-ms-input-placeholder { /* IE 10+ */ 
      color: white; 
    } 
    :-moz-placeholder { /* Firefox 18- */ 
      color: white; 
    } 
 
    header button { 
      width: 50px; 
      height: 50px; 
      position: absolute; 
      top: 11px; 
      right: 35px; 
      z-index: 2; 
      border-radius: 25px; 
      background: #ffffff; 
      border: 0px; 
      box-shadow: none; 
      outline: none; 
      cursor: pointer; 
 
      -webkit-appearance: none; 
      -moz-appearance: none; 
      -ms-appearance: none; 
      -o-appearance: none; 
      appearance: none; 
    } 
 
    header button svg { 
      width: 15px; 
      height: 15px; 
      position: absolute; 
      top: 50%; 
      left: 50%; 
      margin: -7px 0 0 -7px; 
    } 
 
    header button svg .fill { 
      fill: #25b99a; 
    } 
 
    .container { 
      width: 100%; 
      float: left; 
      padding: 15px; 
      margin-left: -48px; 
    } 
 
    ul.todo { 
      width: 100%; 
      float: left; 
      padding: 43px 0 0 32.5px; 
    } 
 
    ul.todo li { 
      width: 100%; 
      min-height: 20px; 
      float: left; 
      font-size: 14px; 
      font-weight: 500; 
      color: #444; 
      text-indent: 14px; 
      line-height: 22px; 
      list-style-type: none; 
 
      background: #ffffff; 
      border-radius: 5px; 
      position: relative; 
      box-shadow: 0px 1px 2px rgba(44,62,80,0.10); 
      margin: 0 0 10px 0; 
      padding: 14px 0 14px 0; 
    } 
 
    ul.todo li:last-of-type { 
      margin: 0; 
    } 
 
    ul.todo li .buttons { 
      width: 100px; 
      height: 50px; 
      position: absolute; 
      top: 0; 
      right: 0; 
      cursor: pointer; 
    } 
 
    ul.todo li .buttons button { 
      width: 50px; 
      height: 50px; 
      float: right; 
      background: none; 
      position: relative; 
      border: 0px; 
      box-shadow: none; 
      outline: none; 
      cursor: pointer; 
 
      -webkit-appearance: none; 
      -moz-appearance: none; 
      -ms-appearance: none; 
      -o-appearance: none; 
      appearance: none; 
    } 
 
    ul.todo li .buttons button:last-of-type:before { 
      content: ''; 
      width: 1px; 
      height: 30px; 
      position: absolute; 
      top: -6px; 
      left: 35px; 
      background: #edf0f1; 
    } 
 
    ul.todo li .buttons button { 
      width: 18px; 
      height: 22px; 
      position: absolute; 
      top: 3px; 
      right: 16px; 
      margin: 12px 0 0 11px; 
    } 
 
    ul.todo li .buttons button.complete { 
      width: 20px; 
      height: 20px; 
      border-radius: 15px; 
      border: 1.5px solid #25b99a; 
      position: absolute; 
      top: 3px; 
      right: 60px; 
    } 
 
    ul.todo#completed { 
      position: relative; 
    } 
 
    ul.todo#completed:before { 
      content: ''; 
      width: 200px; 
      height: 2px; 
      background-color: #d8e5e0; 
      position: absolute; 
      top: 5px; 
      left: 34%; 
    } 
 
    ul.todo#todo:empty:after { 
      content: 'You have nothing to-do.'; 
      margin: 22px 0 0 0; 
    } 
 
    ul.todo#completed:empty:after { 
      content: 'You have yet to comeplete any tasks.'; 
    } 
 
    ul.todo#todo:after { 
      width: 100%; 
      display: block; 
      text-align: center; 
      font-size: 13px; 
      font-family: 'Dancing Script', cursive; 
      color: #aaaaaa; 
    } 
 
    ul.todo#completed:after { 
      width: 100%; 
      display: block; 
      text-align: center; 
      font-size: 13px; 
      font-family: 'Dancing Script', cursive; 
      color: #aaaaaa; 
    }
//html code/////////////////////////////////////////////////////////// 
 
    <!DOCTYPE html> 
 
    <html> 
 
    <head> 
 
      <meta charset="utf-8"> 
      <title>Todo list application</title> 
 
      <!-- Roboto font embed --> 
 
      <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 
 
        <!-- Stylesheets --> 
 
      <link rel="stylesheet" type="text/css" href="style.css"> 
 
    </head> 
 
    <body> 
 
     <header> 
 
       <input type="text" placeholder="Enter an activity..." id="item"> 
       <button id="add"> 
         <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
             viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve"> 
         <g> 
                <path class="fill" d="M16,8c0,0.5-0.5,1-1,1H9v6c0,0.5-0.5,1-1,1s-1-0.5-1-1V9H1C0.5,9,0,8.5,0,8s0.5-1,1-1h6V1c0-0.5,0.5-1,1-1 
                    s1,0.5,1,1v6h6C15.5,7,16,7.5,16,8z"/> 
         </g> 
         </svg> 
       </button> 
 
     </header> 
 
    <div class="container"> 
 
      <!-- Uncompleted tasks --> 
 
     <ul class="todo" id="todo"></ul> 
 
    <!-- Completed tasks --> 
 
     <ul class="todo" id="completed"></ul> 
 
    </div> 
 
    <!-- JavaScript --> 
 
     <script src="main.js"></script> 
 
    </body> 
 
    </html>

READ ALSO
Pointers in new Array() causing problems

Pointers in new Array() causing problems

can someone explain to me why using new Array() and filling it with more Array (a Matrix) generated in the same way, causes that in the end there is only one reference?

81
discord.js spam command troubles

discord.js spam command troubles

im still fairly new to javascript so im not sure if this is even possible the way ive been trying to do it ive looked through w3schools developersmozilla and even a few questions that are already on here; ive tried using do while, and for loops and ive tried multiple...

154
Canvas goes white when redrawn

Canvas goes white when redrawn

I'm using CanvasTextWrapper to add some text to a button for use in a WebGL page

93
Why does HTML load differently in a zip then out? (Chrome)

Why does HTML load differently in a zip then out? (Chrome)

I have noticed that HTML renders differently in a zip then out of a zipI believe that this is because my CSS is not being loaded from a file in the zip

94