6_client_side_storage

dz / mdn / js / 4_client_side_web_APIs / 6_client_side_storage

Summary

Client-side storage

Node Tree

• client_side_storage
  • uses
    • offline
    • optimization
    • persistance
      • persistant_btwn_reloads
    • personalization
  • webstorage_indexeddb
    • web_storage_api
      • set_item
        • get_item
      • get_item
      • more_complex_than_web_storage
      • persistant_btwn_reloads
      • remove_item
      • sep_storage_each_domain
    • cache_api
      • used_with_cache_api
        • match
        • respond_with
      • add_all
      • match
      • respond_with
    • indexed_db
      • storing_complex_data
        • object_url
          • create_object_url
        • response_blob
      • transaction
      • upgradeneeded
      • create_object_store
        • create_index
      • create_object_stores_within_db
        • obj_stores_sim_db_table
      • more_complex_than_web_storage
      • object_store
        • add
        • delete
        • open_cursor
      • open
        • returns_req_add_event_handlers
          • result_contains_db
  • cookies
    • old_school
  • offline_asset_storage
    • service_worker
      • usually_saves_network_responses
        • used_with_cache_api
          • match
          • respond_with
      • installing
      • registering

Nodes

client_side_storage
content	client-side storage
children	uses, webstorage_indexeddb, cookies, offline_asset_storage

uses
content	uses
children	offline, optimization, persistance, personalization
parents	client_side_storage

persistance
content	persisting previous site activity
children	persistant_btwn_reloads
parents	uses

personalization
content	personalizing site preferences
parents	uses

optimization
content	saving data/assets for quicker reload
parents	uses

offline
content	save web docs locally for local use
parents	uses

cookies
content	cookies
children	old_school
parents	client_side_storage

old_school
content	old school
parents	cookies

webstorage_indexeddb
content	WebStorage nad IndexedDB
children	web_storage_api, cache_api, indexed_db
parents	client_side_storage

web_storage_api
content	WebStorage API: store/retrieve smaller data values name/value
children	set_item, get_item, more_complex_than_web_storage (idb more complex than), persistant_btwn_reloads, remove_item, sep_storage_each_domain
parents	webstorage_indexeddb

indexed_db
content	IndexedDB: provides browser with complete DB system for storing complex data
children	storing_complex_data, transaction, upgradeneeded, create_object_store, create_object_stores_within_db, more_complex_than_web_storage, object_store, open
parents	webstorage_indexeddb

set_item
content	SetItem(): save data item in storage
children	get_item (related)
parents	web_storage_api

cache_api
content	Cache API: stores HTTP responses to specific request, useful for storing assets offline so site can be used without network connection.
children	used_with_cache_api, add_all, match, respond_with
parents	webstorage_indexeddb

get_item
content	getItem(): retrieves data, given a name
parents	web_storage_api, set_item

persistant_btwn_reloads
content	persistant data between reloads
parents	web_storage_api, persistance

remove_item
content	removeItem(): given a name, removes item out of storage
parents	web_storage_api

sep_storage_each_domain
content	separate storage for each domain
parents	web_storage_api

create_object_stores_within_db
content	create object stores within db
children	obj_stores_sim_db_table
parents	indexed_db

more_complex_than_web_storage
content	more complex than web storage API
parents	web_storage_api, indexed_db

obj_stores_sim_db_table
content	object stores similar to tables in relational DB, each object can contain a number of objects.
parents	create_object_stores_within_db

open
content	open()
children	returns_req_add_event_handlers
parents	indexed_db

returns_req_add_event_handlers
content	returns request, add success/error event handlers
children	result_contains_db
parents	open

result_contains_db
content	e.result contains the database
parents	returns_req_add_event_handlers

upgradeneeded
content	upgradeneeded: handler than runs when/if DB not set up or if DB opned with bigger version number than existing stored DB.
parents	indexed_db

create_object_store
content	createObjectStore()
children	create_index
parents	indexed_db

create_index
content	createIndex()
parents	create_object_store

transaction
content	transaction()
parents	indexed_db

object_store
content	objectStore
children	add, delete, open_cursor
parents	indexed_db

add
content	add()
parents	object_store

open_cursor
content	openCursor()
parents	object_store

delete
content	delete()
parents	object_store

storing_complex_data
content	storing complex data
children	object_url, response_blob
parents	indexed_db

response_blob
content	respones.blob()
parents	storing_complex_data

object_url
content	object URL: internal URLs that point to blobs stored in memory.
children	create_object_url
parents	storing_complex_data

create_object_url
content	URL.creatObjectURl()
parents	object_url

offline_asset_storage
content	offline asset storage
children	service_worker
parents	client_side_storage

service_worker
content	service worker: JS file registered against origin, controls pages available at origin by setting between loaded page and intercepting network requests for that page.
children	usually_saves_network_responses, installing, registering
parents	offline_asset_storage

usually_saves_network_responses
content	usually saves network responses
children	used_with_cache_api
parents	service_worker

registering
content	registering
parents	service_worker

used_with_cache_api
content	used with Cache API to store requests
children	match, respond_with
parents	cache_api, usually_saves_network_responses

add_all
content	Cache.addAll()
parents	cache_api

respond_with
content	respondWith()
parents	cache_api, used_with_cache_api

match
content	cache.match()
parents	cache_api, used_with_cache_api

installing
content	installing
parents	service_worker