Week 7 – JSON and Local Storage

Standard

I worked more on JSON this week, working on examples of parse and stringify. Here are some more of my notes and resources that I used to help me understand better:

What are JSON Stringify and Parse?? What do they do?

JSON.stringify turns a Javascript object into JSON text and stores that JSON text in a string. JSON.parse turns a string of JSON text into a Javascript object. JSON.parse() is for “parsing” something that was received as JSON. JSON.stringify() is to create a JSON string out of an object/array.”

ex: An array of names printed as a string, and then put back into an array
JSON Stringify

JSON.stringify() returns a JSON string for a specified value, optionally is can include only certain properties based on what the user defines.

JSON Parse

JSON.parse() is a method that parses a string as JSON, or you can change the output and return it’s value.

Resources


I also learned a lot about local storage and got a chance to see how it works well with JSON actually.

Local Storage

  • It is a JavaScript API in HTML5, where you can save key/value pairs. You can use the JavaScript library.
  • Cookies were previously used, but local storage is safer and can store a lot more (5MB+). It works per one domain and protocol.
  • !! Don’t use this for sensitive information!

 

Two Different Types of Storage

  1. Per session – expires after tab is closed
    1. window.sessionStorage
  2. No expiration
    1. window.localStorage

***Check first to see if your browser can even support it

if(typeof(Storage) !== “undefined”) {

// Code for localStorage/sessionStorage.

} else {

// Sorry! No Web Storage support..

}

Examples of Useful Local Storage

I wasn’t sure why you would want to use this or how it could be useful. After doing some research, here are some examples:

  • Store searches for a site that you might repeat
  • Store text or other information that you’ll use multiple times (ex: trying a font website with example text)
  • Filling out a form or table (without sensitive info), ex: sweet 16 bracket with friends
  • Search options or check boxes that you don’t want to have to click each time

 

How to Create and Retrieve a Name/Pair

***Values are always stored as strings, so you will need to convert to the correct format when necessary

ex: Number(localStorage.clickcount)

//make

localStorage.setItem(“name”, “value”);

//retrieve

document.getElementById(“div-id/class”).innerHTML = localStorage.name;

//can remove

localStorage.removeItem(“name”);

 

Resources

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s