Laboratory Work No. 6: Cookie, LocalStorage, JSON, Classes, Fetch API Course: Web Programming and Web Design University: Kherson National Technical University Faculty: Information Technologies and Design Department: Software and Technologies Group: 2PR1 Author: O.O. Korniienko Instructor: O.S. Komisarov Year: 2026
Project Description This project implements 6 tasks on the topics Cookie, LocalStorage, JSON, Classes, and Fetch API as part of Laboratory Work No. 6. Each task is implemented as a separate web page using HTML, CSS, and JavaScript.
The main focus is on:
Persistent data storage (Cookie, LocalStorage)
Working with JSON data
Object-oriented programming in JavaScript (classes, inheritance, static methods)
Asynchronous API requests with Fetch API
Technologies Used HTML5
CSS3 (Flexbox, Grid, gradients, animations)
JavaScript (ES6+)
Cookie API
LocalStorage API
JSON parsing and stringifying
OOP (Classes, inheritance, static properties/methods)
Fetch API (async/await)
Tasks Task 1 – Textarea History (Cookie) A textarea field that stores its edit history in cookies.
Save button – saves the current text to history
Previous / Next buttons – navigate through history
Clear history button – resets all history
History persists even after page reload
Task 2 – Form Auto-Save (LocalStorage) A form with various input types (text, email, textarea, radio, checkbox, select). All form data is automatically saved to localStorage on every input change. When the page is reopened, previously entered data is automatically restored.
Task 3 – Image Gallery from JSON An input field accepts a JSON array of image filenames (e.g., ["img1.jpg", "img2.png"]).
On button click, thumbnails are generated
Clicking a thumbnail opens the full-size image in a modal
Invalid JSON displays an error message
Task 4 – Classes (Students Table) Object-oriented implementation with class inheritance:
Student class – stores student data (last name, first name, grades by subject).
ListOfStudents class – accepts an array of students via constructor and generates an HTML table with getTableList().
StylesTable class – inherits from ListOfStudents:
getStyles() – returns CSS styles for the table
Overridden getTableList() – adds styles to the parent table
getAvg() – calculates each student's average grade and adds it as a column
getTotalAvg() – calculates the overall group average grade
Task 5 – Static Methods (Shape Class) A Shape class demonstrating static properties and methods:
Static property total – amount of paint available (0–100%)
Static method fill() – refills paint to 100%
draw() method – draws a circle or square, consuming paint based on area. If there's not enough paint, drawing fails.
The UI includes a paint level indicator bar and buttons to draw shapes or refill paint.
Task 6 – Fetch API (Random Dogs) Using the free API https://dog.ceo/api/breeds/image/random:
Click a button to fetch a random dog image
Images are added to a gallery
Each new image appears with smooth scrolling
Clear button removes all images
Project Structure
lab6-cookie-localstorage-json-classes-fetch/ ├── index.html # Main menu with links to all tasks ├── 1.html # Task 1 – Textarea history (Cookie) ├── 2.html # Task 2 – Form auto-save (LocalStorage) ├── 3.html # Task 3 – Image gallery from JSON ├── 4.html # Task 4 – Classes (Students, inheritance, averages) ├── 5.html # Task 5 – Static methods (Shape with paint system) ├── 6.html # Task 6 – Fetch API (random dog gallery) └── README.md # This file
How to Run Clone the repository or download all files.
Open index.html in any modern web browser.
Click on any task card to open the corresponding interactive page.
Follow the on‑screen instructions for each task.
Note: All functionality is implemented client‑side with pure JavaScript. No web server is required. For Task 6 (Fetch API), an active internet connection is required.
Usage Examples Task 1 Type text in the textarea
Click Save to history – text is stored
Edit and save again – new version is added
Use Previous / Next to navigate through versions
Refresh the page – history is still available
Task 2 Fill in any form fields (name, email, message, gender, city, subscribe)
Close or refresh the page
Reopen the page – all previously entered data is automatically restored
Task 3 Input:
["https://picsum.photos/id/1/100/100", "https://picsum.photos/id/2/100/100"]
Click Load → thumbnails appear. Click any thumbnail → full image opens in modal.
Task 4 The page displays:
Styled table with student grades
Table with average grade column for each student
Overall group average grade
Task 5 Initial paint: 100%
Select Circle or Square, enter size (20–150)
Click Draw – shape appears, paint decreases
Continue drawing until paint runs out
Click Refill paint – paint returns to 100%
Task 6 Click Get random dog → a new dog image is added to the gallery. Click Clear gallery → all images are removed.
Implementation Features Cookie (Task 1) History stored as JSON array in a cookie
Cookie expires after 1 year
Navigation through history with boundary checks
LocalStorage (Task 2) All form inputs (text, checkbox, radio, select) are saved
input and change events trigger auto-save
Clear button removes data from both form and localStorage
JSON (Task 3) Manual JSON parsing with error handling
Dynamic thumbnail generation
Modal window for full-size images
OOP (Task 4) Proper class inheritance (StylesTable extends ListOfStudents)
Method overriding
Dynamic HTML generation from objects
Grade average calculations
Static Methods (Task 5) static total property shared across all instances
static fill() method affects all shapes
Area-based paint consumption (circle area = πr², square = a²)
Visual paint indicator with color transitions
Fetch API (Task 6) Async/await pattern
Error handling for network issues
Responsive image gallery
Key Learning Outcomes Working with persistent storage (Cookies, LocalStorage)
Parsing and validating JSON data
Building dynamic UI from structured data
Object-oriented programming in JavaScript
Class inheritance and method overriding
Static properties and methods
Making asynchronous HTTP requests with Fetch API
Author O.O. Korniienko Student of group 2PR1 Kherson National Technical University
License This project was created for educational purposes. Free use and modification are allowed.