Why doesn't my local storage work?

Question

I am trying to localStore the history but it does not work. I tried JSON.stringify and a script called JStorage but I couldn't get either to work.

function updateHistory(video) {
getHistory();
blacklist[video["id"]] = true;
myhistory.push(video);
var html = "<li class=\"history\">" +
    "<img class= \"img-rounded\" src=\"{0}\"/>" +
    "<p><b title=\"{2}\"><a class=\"extendedLink\" href=\"javascript:watchHistoricVideo(\'{1}\');\"><span></span>{2}</a></b><br>" +
    "by {3}<br>" +
    "{4} | {5} views</p>" +
    "</li>";

$("#myhistory").prepend(html.format(video["thumbnail"],
    video["id"],
    video["title"],
    video["uploader"],
    video["length"],
    video["views"]));
saveHistory();
}

function saveHistory() {
localStorage.setItem(myhistory, myhistory.innerHTML);
}

(The alert does show up)

function getHistory() {
localStorage.getItem(myhistory);
alert("working");
}

Define "does not work." What exactly is `getHistory()` supposed to do, anyway? — Matt Ball, Feb 20 '14 at 19:04
http://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage — random_user_name, Feb 20 '14 at 19:04
myhistory is an array. Why are you using .innerHTML on it? You didn't pass a string name to be used as the localstorage item name. — Kevin B, Feb 20 '14 at 19:05

Mehran Hatami · Accepted Answer · 2014-02-20T20:17:02.380

The point is, instead of storing the html part you better store the video object instead, you can store videos based on their id, and instead of array use javascript object:

function setVideo(video) {
    var videos = JSON.parse(localStorage.getItem("myhistory") || "{}");
    videos[video["id"]]=video;
    localStorage.setItem("myhistory", JSON.stringify(videos));
}
function getVideos() {
    var myhistory = localStorage.getItem("myhistory");
    if(!myhistory) return {};
    else return JSON.parse(myhistory);
}
function getVideo(id) {
    var myhistory = localStorage.getItem("myhistory");
    if(!myhistory) return null;
    var videos = JSON.parse(myhistory);
    return videos[id] || null;
}

now you can use getVideo to retrieve the video object by id.you can separate the part which shows the video, like:

function showVideo(video) {
    blacklist[video["id"]] = true;
    var html = "<li class=\"history\">" +
        "<img class= \"img-rounded\" src=\"{0}\"/>" +
        "<p><b title=\"{2}\"><a class=\"extendedLink\" href=\"javascript:watchHistoricVideo(\'{1}\');\"><span></span>{2}</a></b><br>" +
        "by {3}<br>" +
        "{4} | {5} views</p>" +
        "</li>";

    $("#myhistory").prepend(html.format(video["thumbnail"],
    video["id"],
    video["title"],
    video["uploader"],
    video["length"],
    video["views"]));
}

let's say you want to show the whole videos in the history:

var videos = getVideos();
for(var id in videos){
    showVideo(videos[id]);
}

Thanks, but how would I use getVideo to make the video show up in the array next time the user uses the site? — bohmygod, Feb 20 '14 at 19:56

Why doesn't my local storage work?

1 Answers1