JS VII

Today

• Data storage
• JS Modules
• Final Project

Recap from last class

• Data storage

Data storage

Client side storage

• JS enables data storage in users’ machines
  • browser, app
• Cookies
  • Simple data
• Web Storage
  • Simple data
• IndexedDB
  • Complex data

Client side storage

We will focus on Web Storage in this class

• Cookies
• Web Storage
• IndexedDB
  • Complex data

Web Storage

• Storing data for different origins (e.g., hostname)
• You can’t access data for other origins
  • Security
• There is a limit
  • Around 5 MiB of local storage per origin

Web Storage

Use cases

• Saving preferences (e.g., color scheme, font size)
• Previous site activity (e.g., shopping cart, login info)
• Saving documents for offline use

Web Storage

• sessionStorage
  • Persists data for as long as the browser is open
  • Data is lost when browser is closed
• localStorage
  • Persists data even after the browser is closed

Saving data in localStorage

• setItem(key, value)
  • Save a data item
  • Both key and value must be strings

localStorage.setItem("bgcolor", "red");
localStorage.setItem("font", "Helvetica");
localStorage.setItem("image", "myCat.png");

Getting data from localStorage

• getItem(key)
  • Return the string data for a given key
  • null, if the key doesn’t exist

const currentColor = localStorage.getItem("bgcolor");
const currentFont = localStorage.getItem("font");
const currentImage = localStorage.getItem("image");

Removing data from localStorage

• removeItem(key)
  • Deletes the data item for a given key

localStorage.removeItem("image");

Web Storage

• Storing data for different origins (e.g., hostname)
• You can’t access data for other origins
  • Security

How can we store non-string data in localStorage?

We will use JSON

JSON

Structured data as a string

• Standard text-based format (string)
• Follows JavaScript object syntax

JSON

{
  "orderId": "12345",
  "customer": {
    "firstName": "Jane",
    "lastName": "Doe",
    "address": "123 Main St"
  },
  "items": [
    {
      "product": "Laptop",
      "quantity": 1,
      "price": 1200.50
    }
  ]
}

Converting between objects and text

• JSON.parse
  • String –> JS Object (or value)
• JSON.stringify
  • JS Object (or value) –> String

JSON.parse

String –> JS Object (or value)

const json = '{"result":true, "count":42}';
const obj = JSON.parse(json);

console.log(obj.count);
// Expected output: 42

console.log(obj.result);
// Expected output: true

JSON.parse

String –> JS Object (or value)

JSON.parse('[1, 5, "false"]');

What’s the outcome?

JSON.stringify

JS Object (or value) –> String

console.log(JSON.stringify({ x: 5, y: 6 }));
// Expected output: '{"x":5,"y":6}'

const a = ["foo", "bar"];
JSON.stringify(a);
// '["foo","bar"]'

How can we store non-string data in localStorage?

We will use JSON

Saving session

const session = {
  screens: [],
  state: true,
};
session.screens.push({ name: "screenA", width: 450, height: 250 });

// Converting the JSON string with JSON.stringify()
// then saving with localStorage in the name of session

localStorage.setItem("session", JSON.stringify(session));

Restoring saved session from localStorage

const restoredSession = JSON.parse(
    localStorage.getItem("session"));

Today

• Data storage
• JS Modules
• Final Project

Todo

• Open Activity 20
• Save modules

Hints

• One option is to add all module names to an array and then save it as an json object
• You can use .children for a given parent node
• You can see saved values (also edit them)
  • Firefox: Dev Tools –> Storage
  • Chrome: Dev Tools –> Application –> Storage

Todo

• Open Activity 20
• Retrieve previously saved modules

Hints

• You can use getItem and then JSON.parse to extract the array
• Take a look at the addAListItem function in main.js

Todo

• What will happen if no values were saved and user click on Load?
• Delete saved modules
  • Firefox: Dev Tools –> Storage
  • Chrome: Dev Tools –> Application –> Storage
• Click on Load modules

Today

• Data storage
• JS Modules
• Final Project

JS Modules

• We can split JS functionalities across modules
• You can then import modules as necessary
• Allows better code management

A module is a separate JS file

• Other modules then can use features from a given module
  • Variables, functions, …

JS Modules

• Open Activity 21 in VS Code
• Two modules
  • main.js
  • dayname.js

Making features available to other modules

in dayname.js

const names = ["Sunday", "Monday", "Tuesday"]

export function dayName(number) {
  return names[number];
}
export function dayNumber(name) {
  return names.indexOf(name);
}

export in front of features will make them available to other modules

You can use a single export statement

const draw = () => {};
const reportArea = 16.5;

export { draw, reportArea };

a single export statement at the end of the module with a comma-separated list of the features

Importing features from a module

in main.js

import {dayName} from "./dayname.js";

The dot (.) in "./dayname.js" indicates current folder

You can also rename imported features

import { name as squareNameOne } from "shapes";

You can import all features as well

import * as Module from "./modules/module.js";

Module.function1();
Module.function2();

Applying the module to your HTML

index.html

<script type="module" src="main.js"></script>

Must include type="module"

Today

• Data storage
• JS Modules
• Final Project

Have you started thinking about the final project topic?

Final project — 2 presentations & 3 submissions

• Proposal submission: 5 points
• Proposal Presentation: 8 points
• Final presentation: 10 point
• Code and documentation: 20 point
• Mandatory group review: 2 points

Final project — 2 presentations & 3 submissions

• Proposal submission: 5 points
• Proposal Presentation: 8 points
• Final presentation: 10 point
• Code and documentation: 20 point
• Mandatory group review: 2 points

Grading rubric for final submission (see syllabus)

• The app must be installable using Chrome — 1.5 points
• The app (and the browser version) should work for different devices — 4.5 points
• At least 3 non-trivial pages with user interaction support — 3 points

Grading rubric for final submission (see syllabus) — contd.

• Stores and retrieves persistent data — 3 points
• Includes icon and consistent theme — 3 points
• Ensures accessibility — 3 points
• Documentation for the code and the system — 2 points

Bonus Features (maximum 5 points)

• 5 non-trivial pages or more — 1 point

• Use of camera — 1.5 points

• Use of microphone — 1.5 points

• Use of location — 2 points

• Integrates user facing generative AI features — 3 points

Final Project

• Considerable flexibility in terms of topic
  • develop a chatbot interface?
  • redesign an existing app (e.g., Penn State Go app, Apple Music)?

Final project topic

• Focus on your portfolio
  • Showcasing it in your job/internship applications?
• Maybe prototype for broader reach?
  • Nittany AI Challenge
  • IdeaMakers Challenge

Next todos: Check Canvas

• Proposal Submission
• Proposal Presentation

What questions do you have?

We will work on final project during our class from next week

• Thursday (10/23): Selecting topics and sketching UI/user-flow
• Tuesday (10/28): Proposal and presentation

We will take attendance on those days

Mandatory group review

• Due at the end of the class
• Report evaluating performance of each group member (including yourself)
• Will also be used to adjust project grades
• Be fair, courteous, and respectful to your group member

Assignment 3

• In the video, the app theme is set to Pugh blue
  • Updated description