Массивы и объекты в localstorage не работают

Question

Я работаю над списком TODO, я пытаюсь сделать эту работу с локальным хранилищем. Но в моем коде есть проблема, которую я не могу решить.

Функция getTaskArray() извлекала, что означало, массив из локального хранилища под ключевыми «задачами». Если он не может найти его, он создал новый массив.

Функция pushData() должна вызывать объект задачи в массив. Но я получаю следующую ошибку: taskArray.push is not a function.

Я приложил фрагмент кода ниже.

Заранее благодарим за вашу помощь!

var taskArray; 
function getTaskArray() { 
    var taskArrayString = localStorage.getItem("tasks"); 
    if (taskArrayString !== null && typeof taskArrayString === "string") { 
     taskArray = taskArrayString; 
     console.log("Succesfully retrieved 'tasks' and contents."); 
    } else { 
     console.log("Succesfully retrieved 'tasks', contents were not a string or held no contents. Contents of 'tasks' reset to empty array"); 
     var emptyArray = JSON.stringify(new Array()); 
     localStorage.setItem("tasks", emptyArray); 
     taskArray = localStorage.getItem("tasks"); 
    }; 
}; 

var taskString; 

function pushData() { 
    taskString = JSON.stringify(taskObject); 
    taskArray = taskArray.push(taskString); 
}; 

Update:

Полная версия моего кода:

// All functions 
var taskFromHtml; 
var priorityFromHtml; 

function getTaskInput() { 
    try { 
     taskFromHtml = $("#taak").val(); 
     priorityFromHtml = $("#prioriteit").val(); 
     console.log("Succesfully retrieved data. Task: " + taskFromHtml + ". Priority: " + priorityFromHtml + "."); 
    } catch(e) { 
     console.log("Failed to retrieve data, unexpecter error."); 
    }; 
}; 

var taskObject; 
function taskToObject() { 
    taskObject = { 
     task: taskFromHtml, 
     priority: priorityFromHtml, 
     finished: false 
    }; 
}; 

var taskArray; 
function getTaskArray() { 
    var taskArrayString = localStorage.getItem("tasks"); 
    if (taskArrayString !== null && typeof taskArrayString === "string") { 
     taskArray = JSON.parse(taskArrayString); // <------ 
     console.log("Succesfully retrieved 'tasks' and contents."); 
    } else { 
     console.log("Succesfully retrieved 'tasks', contents were not a string or held no contents. Contents of 'tasks' reset to empty array"); 
     var emptyArray = JSON.stringify(new Array()); 
     localStorage.setItem("tasks", emptyArray); 
     taskArray = localStorage.getItem("tasks"); 
     taskArray = JSON.parse(taskArray); // <------ 
    }; 
}; 

var taskString; 

function pushData() { 
    taskString = JSON.stringify(taskObject); 
    taskArray = taskArray.push(taskString); 
}; 

И это HTML:

<form id="todoInsert" action="#"> 
     <input type="text" name="task" id="taak"> 
     <select id="prioriteit"> 
      <option value="1">1</option> 
      <option value="2">2</option> 
      <option value="3">3</option> 
      <option value="4">4</option> 
      <option value="5">5</option> 
     </select> 

     <input type="submit" id="formSubmit"> 
    </form> 
    <div id="addItem">+</div> 

Answer 1

Вы получаете ошибку, потому что пытаетесь выполнить функцию push на String вместо массива.

Когда вы получаете строку из localStorage, вам необходимо проанализировать ее с помощью JSON.parse().

taskArray = JSON.parse(localStorage.getItem("tasks")); 

А также, когда ваш получаете успешно в if части:

taskArray = JSON.parse(taskArrayString); 

Ваш полный рабочий код будет:

var taskArray; 
function getTaskArray() { 
    var taskArrayString = localStorage.getItem("tasks"); 
    if (taskArrayString !== null && typeof taskArrayString === "string") { 
     taskArray = JSON.parse(taskArrayString); // <------ 
     console.log("Succesfully retrieved 'tasks' and contents."); 
    } else { 
     console.log("Succesfully retrieved 'tasks', contents were not a string or held no contents. Contents of 'tasks' reset to empty array"); 
     var emptyArray = JSON.stringify(new Array()); 
     localStorage.setItem("tasks", emptyArray); 
     taskArray = localStorage.getItem("tasks"); 
     taskArray = JSON.parse(taskArray); // <------ 
    }; 
}; 

var taskString; 

function pushData() { 
    taskString = JSON.stringify(taskObject); 
    taskArray.push(taskString); // <----- !No need to assign there. 
}; 

Здесь вы можете увидеть рабочий JsFiddle: https://jsfiddle.net/txvp9uwc/2/

Answer 2

Вы можете только сохранить данные в формате строки в локальной место хранения. Вы не можете сохранить, даты, числа или любые другие типы данных. Для этого вы можете сериализовать и десериализовать свои данные как строку JSON, а затем сохранить данные.

Есть некоторые удивительные библиотеки оберток доступны, которые делают, что для вас: https://github.com/nbubna/store или https://github.com/marcuswestin/store.js/

Update

Вы должны десериализаций вашей строки после извлечения перед использованием:

var taskArrayString = localStorage.getItem("tasks"); 
if (taskArrayString !== null && typeof taskArrayString === "string") { 
    taskArray = JSON.parse(taskArrayString); // deserializing here 
    console.log("Succesfully retrieved 'tasks' and contents."); 
}