Local Storage in Javascript

What is Local Storage


Local storage allows you to store data locally in the user's browser with no expiration date.

Creating local storage data

   
                            localStorage.setItem('name','Ben'); 
                            // the key and value parameters of local storage are strings
                       

You can see that key/value pair has been created. With key = `name` and value = `Ben` in the web developer tools of your browser. To access this open the browser. Select ctrl + shirt + i and go into `Application` then `Local Storage` and select the tab where you see your local web address.

Removing local storage data

   
                            localStorage.removeItem('name');
                       

This removes the key/value pair from the local storage.

Clearing local storage data

   
                            localStorage.clear();
                       

This clears the local storage. Use with caution.

Retrieving local storage data

   
                            const name = localStorage.getItem('name')
                       

This clears the local storage. Use with caution.

Creating local storage data from an array

   
                         let names =[];
                        names.push('ABBA','ACDC','Aerosmith');
                        localStorage.setItem('names',JSON.stringify(names)); // use JSON.stringify to convert array to string.
                       

If we have data in a array that we want to pass to localStorage, we must first convert that into a string.

Summing elements in an array using forEach

   
                        var tot = 0;
                        myArr.forEach((curr)=>{
                            tot +=curr;
                        })

                        console.log('forEach',tot);
                       



Objects


Memory location

When are two objects equal? When they are pointing to the same memory location.


                    var obj1 = { myValue: 100};
                    var obj2 = { myValue: 100};
                    console.log('Are they equal? ',obj1 === obj2); //expected output: false; 

                    var obj3 = obj1;
                    obj1.myValue = 200;                           // upddate value;
                    console.log('Are they equal?',obj1 === obj3); //expected output: true;
                    
                     

Note: obj1 and obj3 are pointing to the same memory location. Updating the value of obj1 updates the value of obj3 as well.

It does not matter that obj1 and obj2 have the same value because they are two different objects. Because obj1 and obj2 are two different objects, they point to a different memory location. Thus, they are not the same object.

Array are objects too

An array is also an object in javascript. Because arrays are a special type of js object, the same reasoning from the previous example holds true. The two arrays below point to different locations in a computers memory. Eventhough both arrays have the same value, they are two different objects.


                        [1,2,3] === [1,2,3]; //expected output: false;
                     

Object Instantiation Part 1

Object instantiation lets you create instances of objects. Below is a person object constructor. Each person object has a name, a gender, and an age.


                        // INSTANTIATION
                        class Person {
                            constructor(name,gender,age){
                                this.name = name;
                                this.gender = gender;
                                this.age = age;
                                console.log('what is this? ',this); // expected output: Person object.
                            }
                        }
                        const anna = new Person('Anna','female',22);
                     

We can keep adding new methods to the Person object.


                        // INSTANTIATION
                        class Person {
                            constructor(name,gender,age){
                                this.name = name;
                                this.gender = gender;
                                this.age = age;
                                console.log('what is this? ',this); // expected output: Person object.
                            }
                        }
                        const anna = new Person('Anna','female',22);
                     

Anonymous Functions

Anonymous functions are functions without a name. For instance:


                 //create a function with multiple inputs
                 function(a,b){
                     return a + b;
                 }
                 //An Anonymous function
              

What are function expression?

Function expressions: are anonymous functions that are assigned to a variable. For instance:


                 //A function expression
                 var add1 = function(a,b){
                     return a + b;
                 }
                // a function expression.
              

Note:If you call the function add1 before the function expression you get an undefined TypeError.


                 add1(2,1); // expected output: TypeError: add1 is not a function
                 var add1 = function(a,b){
                     return a + b;
                 }
              

What are function declarations?

Function Declarations are named functions. They are not assigned to a variable and are written like:


                 add2(2,1); // expected output: 3;
                 function add2 (a,b){
                     return a + b;
                 }
                 // add2 is an example of a function declaration. It can be called before the named function.
                 // note function statement and function declaration is often used interchangeablely.
              

Function Constructors

Function constructors create blueprints for an object. They are handy when we know we will be creating many similar objects with similar properties. Below outlines the `steps` or algorithm needed to create function constructors.

                           
            // Creating function constructors
            // Here is an example of creating a Person object using the function constructor method.
            // We name function constructors starting with a Capital letter by convention. 
            // This is to distinguish function contstructors from regular objects and functions.

            //Create a `Person` function constructor
            function Person(name,age,netWorth,gender){
                this.name = name;
                this.age = age;
                this.netWorth = netWorth;
                this.gender = gender;
            }

            const mark = new Person('Mark',34,'74 billion','male'); // a new Person object `mark` was created.
            console.log(mark); 

            // we can add a property to the existing Person object of mark.
            mark.nationality = 'American'; // this nationality is unique to the mark object only.
            console.log(mark); 

            // we can add a new method to the existing Person object or mark.
            mark.greeting = () =>{
                console.log(`Hi my name is ${mark.name} and I am CEO bitch`); // this greeting is unique to mark.
            }
            // calling the greeting function
            mark.greeting();


            // we can add additional properties or method to the Person function constructor anytime. 
            // Example 

            function Person(name,age,netWorth,gender){
                this.name = name;
                this.age = age;
                this.netWorth = netWorth;
                this.gender = gender;
                this.greeting = ()=>{
                    console.log(`Hi my name is ${this.name}!`);
                }
            }

            const jeff = new Person('Jeff Bezos', 54,'100 billion','male');
            console.log(jeff); // we see the jeff object does not have the `nationality` property.
            
            // calling the greeting method.
            jeff.greeting();

            // over writing the greeting method with a personalized `jeff` greeting method
            jeff.greeting = ()=>{
                console.log(`Hi my name is ${jeff.name} but you can call me king Bezos! `);
            }
            // calling the updated `jeff` greeting method
            jeff.greeting();
 






Services
  • SEO
  • Online Advertising
  • Online Ordering For Restaurants
  • Data Analytics

  • External Resources 4 Developers
  • CSS Tricks
  • MDN

  • Dash-Intel.com is a Power BI and Tableau resource site around data visualizations and building business dashboards.

    Data Analytics consultants in Edmonton, Alberta specializing in Tableau and marketing analytics

    Copyright 2020 Dash-Intel.com Terms / All rights reserved.