Exercises 1

1.Create a session cookie with the name cookie_test and the value my_cookie.

Answer:

document.cookie = 'cookie_test=my_cookie';

2.Create a persistent cookie that expires 1 year from today.

Answer:

var cookieDate = new Date(); 
cookieDate.setFullYear(cookieDate.getFullYear() + 1); 
document.cookie = 'one_year=cookie1;expires=' + cookieDate.toGMTString();

3.Create a cookie that will only be sent to the server over HTTPS.

Answer:

document.cookie = 'cookie2=cats;secure';

4.Create two cookies at the same time, one with the name cookie1, and one with the name cookie2. Use values of your own choosing.

Answer:

 document.cookie = 'cookie1=cats';
 document.cookie = 'cookie2=dogs';

5.Create a function that can extract the names and values of all cookies for a domain and save them as keys and values in an object.

Answer:

var parseCookies = function () {
    var cookieData = (typeof document.cookie === 'string' ? document.cookie : '').trim();
    return (cookieData ? cookieData.split(';') : []).reduce(function (cookies, cookieString) {
        var cookiePair = cookieString.split('=');
        cookies[cookiePair[0].trim()] = cookiePair.length > 1 ? cookiePair[1].trim() : '';

        return cookies;
    }, {});
};

Create a Cookie notification that only displays if the visitor does not have a cookie stating that they have acknowledged the notification. This should be a persistent cookie, which is only set when the visitor clicks a confirm button inside the notification.

Answer:

See the Pen Did you get the Cookie? by oscar (@nopity) on CodePen.



Exercises 2

1.Create a new key-value pair with a key and value of your choice in localStorage.

Answer:

 localStorage.setItem('cats' : 'meow');

2.Create a function that outputs the values of all items in localStorage in an array.

Answer:

function localStorageValues () {
  var values = []; 
  for(var i = 0; i < localStorage.length; i++) {
    values.push(localStorage.getItem(localStorage.key(i))); 
  }
  return values; 
}

3.Store an object or an array in localStorage.

Answer:

localStorage.setItem('username', JSON.stringify([1,2,3,4,5]));

4.Build a series of pages that share data via localStorage.

Answer:

link

5.Create a set of tabs that remember which tab was previously selected when reloading the page.

Answer:

See the Pen localStorage tabs by oscar (@nopity) on CodePen.

Using localStorage

Create a Cookie notification that only displays if the visitor does not have a cookie stating that they have acknowledged the notification. This should be a persistent cookie, which is only set when the visitor clicks a confirm button inside the notification.

Answer:

See the Pen themeSwitcher by oscar (@nopity) on CodePen.



Exercises 3

Completed friendsList for all exercise 3

1.Create a new database that contains a single object store called friends

Answer:

  if ('indexedDB' in window) {
    var openRequest = idb.open('testDB', 1); 

    openRequest.onupgradeneeded = function (event) {
        var db = event.target.result,
        objectStore = db.createObjectStore('friends'); 
    }
  }

2.Add five new friend objects to the friends object store, with each object containing name, email, and phone properties that have values of your choosing.

Answer:

  if ('indexedDB' in window) {
    var openRequest = idb.open('testDB', 1); 

    openRequest.onupgradeneeded = function (event) {
        var db = event.target.result,
        objectStore = db.createObjectStore('friends', {keyPath: 'name'}); 
      
        objectStore.transaction.oncomplete = function(event) {
           var transaction = db.transaction('friends' , 'readonly'), 
               objectStore = transaction.objectStore('friends'), 
               friends = [{name: 'John', email: 'johnwick@gmail.com', phone: 3233434}, {name: 'Oscar', email: 'oscar@gmail.com', phone: 2123234},{name: 'Sarah', email: 'sarah@gmail.com', phone: 3433674},{name: 'Raphael', email: 'raphael@gmail.com', phone: 9033434},{name: 'Leonardo', email: 'leonardo@gmail.com', phone: 8483434}];

               friends.forEach(function(friend) {
               objectStore.add(friend);
            }
        }; 

    }
  }

3.Build a page that displays all of the friends in a list.

Answer:

Completed friendsList for all exercise 3

4.Add a feature to the page that allows friends to be deleted.

Answer:

Completed friendsList for all exercise 3

5.Add a feature to the page that allows existing friends to be edited.

Answer:

Completed friendsList for all exercise 3