Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

9.3 Web Storage

There are several different ways in which we can store data between browser sessions, including localStorage, Web SQL, and IndexedDB. In this lesson, we’ll look at how we can use each of these technologies, and when each might be useful.

Syntax

  • sessionStorage
  • localStorage
  • setItem
  • getItem
  • key
  • removeItem
  • clear

1.Introduction
2 lessons, 07:42

1.1
Introduction
02:12

1.2
Setup
05:30

2.Language Fundamentals
8 lessons, 1:00:53

2.1
Variables
06:33

2.2
Data Types
11:28

2.3
Arithmetic, Assignment, and Comparison Operators
10:24

2.4
Unary, Logical, Comma, and Spread Operators
09:02

2.5
Operator Precedence
03:50

2.6
Reserved Words
04:17

2.7
Strict Mode
04:34

2.8
Functions
10:45

3.Data Structures
5 lessons, 22:52

3.1
Arrays
04:29

3.2
Objects
04:30

3.3
Sets
04:57

3.4
Maps
04:21

3.5
Weak Maps and Weak Sets
04:35

4.Controlling Program Execution
7 lessons, 37:06

4.1
Conditionals
07:49

4.2
Switch Statements
04:41

4.3
The For Loop
06:39

4.4
The `for .. in` Loop
05:17

4.5
The `for .. of` Loop
04:02

4.6
Iterators
05:03

4.7
While Loops
03:35

5.Using JavaScript
13 lessons, 1:44:36

5.1
Working With Strings
09:32

5.2
Template Literals
05:46

5.3
Working With Numbers
06:57

5.4
Working With Arrays
12:53

5.5
Iterating and Transforming Arrays
07:33

5.6
Working With the Object Type
13:55

5.7
Object Literal Extensions
06:45

5.8
Working With Object Instances
06:45

5.9
Getters and Setters
05:00

5.10
Custom Objects
11:28

5.11
The `Math` API
04:54

5.12
Working With Dates and Times
08:10

5.13
The `Array` Constructor
04:58

6.Functions
8 lessons, 56:07

6.1
The `this` Object
06:15

6.2
Working With Functions
10:11

6.3
Scope
07:37

6.4
Arrow Functions
06:59

6.5
Generator Functions
08:13

6.6
Closures
05:00

6.7
Prototypes
06:26

6.8
Default and Rest Parameters
05:26

7.Miscellaneous
6 lessons, 52:39

7.1
Destructuring Assignments
08:09

7.2
AJAX
08:30

7.3
Regular Expressions
10:51

7.4
More About Regular Expressions
08:38

7.5
Classes
06:48

7.6
ES Modules
09:43

8.Working With the DOM
6 lessons, 37:39

8.1
Selecting HTML Elements
05:02

8.2
Manipulating HTML Elements
07:40

8.3
DOM Traversal
05:25

8.4
Adding and Removing Elements
04:45

8.5
Creating Elements and Other Nodes
04:39

8.6
DOM Events
10:08

9.Web APIs
4 lessons, 17:41

9.1
The Selector API
03:03

9.2
Geolocation
05:29

9.3
Web Storage
05:24

9.4
Web Workers
03:45

10.Asynchronous JavaScript
5 lessons, 26:23

10.1
Promises
09:52

10.2
Promise Chaining
05:11

10.3
The async Keyword
03:21

10.4
The await Keyword
04:04

10.5
More About async and await
03:55

11.Conclusion
1 lesson, 00:43

11.1
Conclusion
00:43


9.3 Web Storage

Hi folks. In this lesson we're going to look at the Web Storage specification which is comprised of a couple of different types of storage, session storage and local storage. Traditionally our options for saving persistent data have been rather limited. We've been able to store a small amount of text in cookies, which are special text files created by the browser and stored locally on the user's machine. Session storage is used to store key-value pairs of data that persists while the window that store the data stays open. Local storage is the same except that the data persists between sessions and can be used to store data, for as long as the user chooses to keep it. A storage object created for a particular domain is scoped to that domain and any sub-domains. It can't be accessed from another domain storage area. Both of these different storage areas make use of the storage interface, and so share the same properties and methods, making them very easy to use. We can save much more data with the storage API than we ever could with cookies, and the interface is much easier and more pleasant to use. The session storage and local storage objects are both global, and so we can access them anywhere in our code. We can add a new item to either session or local storage using the setItem method. This method takes two parameters, which are the key for the item to be stored under and the value. Both of these should be in string formats. If we pass simple values to them, like numbers or booleans, these will be converted to strings automatically. We can see that the message returns undefined. However, if we look in the Applications tab, we can see the storage areas, and we can see that our test item has been set and it has the value true. If we refresh the page we can see that the data is persisted. So the data will still be there if we navigate through different pages in our own website. It will only get lost when we actually close the browser window. If we want to save complex data structures to operate on as objects later on, there is an easy solution. We just need to serialize the object to a string in JSON format using the JSON API. And we can see that we now have the complex object in JSON format in our storage area. When we want to work with this object again, on another page perhaps, we can pass it back into an object from the string using the JSON.parse method. To get an item from within a storage area, we use the getItem method, which only takes a single parameter. And that's the key that the data is stored under. If you go back to the console now. And we can see the JSON string that we like to work with, and obviously if we want to work with that as a proper JavaScript object, we can just call the JSON.parse method. If the key that we passed to the getItem method in order to get the data doesn't exist, the method will return null. If we want to see what the key is for an item at a particular index, we can use the key method. This method takes a simple integer as an argument which corresponds to the index of the key we want to retrieve. So, we can see that at index 0 which we passed to the key method, the name of the key there is testItem. So if we didn't know that was the name of the key, we could use that to find out and then access the data stored within it. To remove an item from either sessions storage or local storage, we need to use the removeItem method. We can see that this method also returns undefined. But if we go back to the Application tab in the browser, we can see that the key has been removed. So in this lesson, we looked at the simple storage API, which gives us session storage for persisting data across sessions. Or local storage for storing data permanently, or until the user chooses to delete it through the browsers interface. The examples in this lesson all revolve around session storage, but local storage is used in exactly the same way and shares the exact same API. So it's easy to mix and match different storage solutions for different situations. We saw how to add new items to storage using the setItem method or retrieve them again using the getItem method. We saw how to read key names of items in the storage object using the key method. And we learned that we can only store simple text strings. We learned that if we want to save complex object structures we need to convert them to JSON first. Lastly we saw how to remove single items with the removeItem method. In the next lesson we'll finish up this section and the entire course with a quick look at web workers. Thanks for watching.

Back to the top