CODEWITHSUNDEEP
javascriptjquerylocal-storage
user2568495
user2568495

Reputation:

How to put an image in a javascript localstorage entry

I'm working with javascript localstorage right now to create an app in which you can create entries with a title, image, description and location. Everything works fine, except I can't figure out how to handle the image. This is the code i use to create an entry:

var json_entry = {'title': titleField.val(),
                  'image': $("#image").val(),
                  'content': contentField.val(),
                  'location': location};

As you can see now I'm simply using the value of the file field. Which puts a fake path in my entry. Obviously handling images with localstorage isn't as simple as i thought. Could anyone give me a code sample of how I can make this work?

Upvotes: 0

Views: 433

Answers (3)

Lun Leong
Lun Leong

Reputation: 61

Sorry I was so late to help here.

var json_entry = [];

json.push({
           title: titleField.val(),
           image: $("#image").val(),
           content: contentField.val(),
           location: location
          });

localstorage.setItem("imageDetail", JSON.stringify(json));

Upvotes: 0

Bill Criswell
Bill Criswell

Reputation: 32921

You can't do this due to security reasons. You'd have to upload the image and store the url to the uploaded image.

You might be able to look into storing a base64 version of the image in localStorage using the File API. Here's quick tutorial on it.

Think about it, if you could store a path to a file on a users machine and call it when you want you can very easily request something like C:\My Documents\Sensitive Data.

Upvotes: 0

tymeJV
tymeJV

Reputation: 104775

Store that whole object in the localStorage (stringified of course):

localStorage.setItem(imageEntry, JSON.stringify(json_entry));

Upvotes: 1

Related Questions