Client-Side Data Storage Ultimate Guide

Learn how cookies store tiny state data in browsers and enable stateful client-server communication through key-value strings with expires, path, domain, and secure properties.

Create cookies by defining a key-value pair with a one day expiration, assign the string to document.cookie, and verify them in Chrome developer tools application cookies view.

Learn to retrieve client-side cookies by parsing document.cookie, splitting by semicolons, and trimming spaces to extract name and value pairs; implement a reusable function to fetch a value by key.

Build a cookie-based login system across a two-page flow (home page and login page), managing cookies to show welcome messages and control login/logout states within the header.

Update cookies by creating a new cookie with the same name to overwrite the old one, changing its value and expiration as needed. Refresh the page to confirm the update.

Extend login expiration by updating cookies and tracking visits using a create cookie function, parsing cookie values to integers, and refreshing on each page revisit.

Learn how to delete a cookie by setting its expiration to a past time, after creating a cookie like username=alperen, and refreshing to verify deletion.

Learn to implement client-side logout by removing cookies and refreshing the page, using get, create, update, and delete cookie functions and an event listener.

Create the project structure by adding script.js and cookie-manager.js to index.html, then verify inclusion with console logs; implement an immediately invoked function expression in strict mode for the library.

Learn to add a create cookie function to a cookie manager, define a six-parameter set function including name, value, expires, domain, path, and secure, and use document.cookie to create cookies.

Create a get function in the cookie manager to retrieve a named cookie from document.cookie, parsing and trimming cookies, returning the value or undefined when absent.

Update cookies using the cookie manager by creating a new cookie with the same name, overwriting the old one, and this lesson demonstrates updating, getting, and refreshing cookies.

Learn how to delete cookies in a client-side data storage library by implementing a remove function that expires the cookie with a past date.

Manage client-side cookies with a practical library that creates, retrieves, updates, removes, lists, and clears cookies as an object array.

Add module support to the library, implementing AMD, CommonJS, and Node.js modules for both client-side and server-side use, with global scope accessibility and preparation for public deployment.

Publish to GitHub by deploying a public repository, initializing with a readme, cloning to the desktop, organizing folders, minifying dist, adding MIT license, and committing and pushing for open-source documentation.

Develop readme.md documentation for the cookie manager library, detailing installation, usage, MIT license, and functions like set, get, update, delete, list, and clear cookies.

Learn HTML5 web storage and its localStorage and sessionStorage mechanisms, replacing cookies for client-side data with up to 5 MB per domain and a simple API.

Learn how to use the local storage object to store and retrieve persistent key-value data with setItem, getItem, removeItem, and clear, and understand the length property and key(index) function.

Learn to store complex objects in local storage by serializing with JSON.stringify, then retrieve and reconstruct them with JSON.parse, including arrays of objects.

Session storage shares the same functions as local storage for storing, retrieving, and removing data, but its lifetime is limited to a browser session, while local storage is persistent.

Master storing numbers and date objects in session storage and local storage by stringifying values, parsing with parseInt and parseFloat, and converting dates with toUTCString before reconstructing Date objects.

Build a simple shopping cart using session storage and set up the project structure with index.html, cart.html, data items json, and style.css. Integrate bootstrap and jquery for a responsive UI.

List and render items dynamically from a JSON file using jQuery's getJSON, bootstrap thumbnails, and a reusable item template, then attach click handlers to add-to-cart buttons.

Create and manage a shopping cart using session storage, add items by id to a cart array, track quantities, persist updates, and refresh the cart indicator with a loading animation.

Create a shopping cart page that loads items from session storage, displays them in a table, calculates the total, and enables removing items via a data attribute.

Design a simple to-do app with local storage, featuring task input and a to-do list, with create, check/uncheck, and delete actions using jQuery; includes normalized CSS and Font Awesome icons.

Learn to build to-do tasks and store them in local storage by initializing from saved items, handling enter key events with jQuery, and syncing the task array.

List and render to-do items stored in local storage, converting objects to templates, handling done state, and synchronizing additions by reloading the item list.

Learn to implement check and uncheck functionality for to-do items using event delegation on the task list, updating the checkbox state and syncing changes to local storage.

Remove to-do items by clicking delete icon, handle item IDs with data attributes, update the array with splice, sync local storage, and re-render the list to persist data across sessions.

Explore Web SQL, a browser-based database using SQLite as the engine for client-side data storage. Learn how tables and SQL queries enable powerful, flexible, browser-resident data management across supported browsers.

Learn SQL basics by creating tables, inserting records, and retrieving, updating, and deleting data with conditional queries and the all-columns shortcut.

Learn the core methods of web sql: open database, transaction, and execute sql, and see how to create a database, define its size, and build a users table.

Learn to create a Web SQL database and logs table using the open database function, a transaction, and run SQL with success and error callbacks, guarding with if not exists.

Learn how to insert new records into a web SQL table using insert into, assign id and message values, and employ static, arguments array, or dynamic variable approaches.

Fetch data from the table using a SQL select, retrieve all rows or the item with id 12, and extract the log message column to show client-side database power.

Learn to update items in a table with a SQL update statement, set the log message to a new value, and target specific rows using the id 12 condition.

Delete items from a table using the delete from statement, including a specific item by id 12 or clearing all rows. Explore CRUD—creating, reading, updating, and deleting—via SQL operations.

Remove a table from a web SQL database using the drop table statement, removing the logs table and refreshing the database to confirm it's gone.

Discover IndexedDB, a powerful large-scale transactional NoSQL database for client-side storage, featuring object stores, indexes, transactions, and cursors beyond relational approaches.

Open an IndexedDB database with the open function using a name and version, then handle onerror, onsuccess, onupgradeneeded, and onblocked to manage object stores, indexes, and upgrades.

Learn to create an indexdb database from scratch, set up object stores, and define primary keys with key path or auto increment to organize data in a no SQL database.

Work through IndexedDB by opening testdb, establishing the books object store, and using transactions in read-only and readwrite modes to fetch or add data.

Build a Bootstrap form to collect ISBN, name, publication year, and created at, create a book object, and add it to the books object store in IndexedDB using a transaction.

Learn to count the total items in an object store using a read-only transaction and the count function, then update the web page with the result.

Fetch data from an object store with a bootstrap user interface and search box to query by isbn, handle clicks, and update book blog when found or warn if not.

List all records from the books object store, fetch data using get all, and render them into a table showing name, isbn, and publication date.

Update data in an object store by fetching a book via ISBN, editing its name and publication year, and saving changes with a put transaction while keeping the ISBN fixed.

Delete data from the object store using the ISBN as the key, with user confirmation, data attributes, and an update to the list after a successful delete.

Learn to remove all data from an object store using the clear function, both via the UI and programmatically with a readwrite transaction, then verify the store is empty.

Delete an object store in indexdb by handling the upgrade needed event, calling the delete object store function with the store name, and increasing database version to trigger the change.

Learn how to delete an IndexedDB database programmatically by calling IndexedDB factory's deleteDatabase function with the database name, after opening and handling events, and verify removal by refreshing the page.

Create and use indexes in an object store to speed up queries, define index name, key path, and options, and fetch data by author with a dedicated index.

Explore IndexedDB index operations with count, get all keys, and get all; then learn to delete an index in the upgrade needed function by updating the version.

Learn how cursors act as pointers to records, iterating object stores and indexes one by one using open cursor and open key cursor.

Learn how to apply sql-style limit and offset on an object store using a cursor. The lab demonstrates counting items and starting from a specified offset.

Learn to use key ranges with IndexedDB cursors to filter items in an object store by defining lower and upper bounds and including or excluding keys.

Celebrate completing the client-side data storage journey and finishing the course. Share your feedback and ratings to help improve the course, and check other courses for what's next.