Make an active site
- By Rob Miles
- 7/3/2023
- Get input from a user
- Storing data on the local machine
- JavaScript heroes: let, var, and const
- Making page elements from JavaScript
- What you have learned
Storing data on the local machine
When you show everyone your adjustable clock, they are very impressed—for a while. Then, they complain that the clock doesn’t remember the entered offset. Each time the clock web page is opened, the minutesOffset is zero, and the clock shows the correct time. They want a clock that retains the minutesOffset value so that each time it is started, it has the same offset that they set last time it was used. They assumed you would know that was what they wanted, and now you must provide it.
JavaScript allows web pages to store data on a local machine. It works because the browser has access to the file storage on the host PC, and the browser can write small amounts of data into this storage and recover it when requested.
Below, the storeMinutesOffset function shows how we can use this feature from a JavaScript program. The storeMinutesOffset function accepts a parameter called offset, which holds the offset value to be stored in the browser’s local storage. The value is stored by the setItem method provided by the localStorage object. This method accepts two arguments—the name of the storage location and the string to be stored there.
function storeMinutesOffset(offset){
localStorage.setItem("minutesOffset", String(offset));
}
The loadMinutesOffset function below fetches a stored offset value using the getItem method, which is provided by the localStorage object. The getItem method is supplied with a string that identifies the local storage item to return. If there is no item in the local storage with the given name, getItem returns null. We’ve seen null before. It is a value that means “I can’t find it.” The code below tests for a return value of null from the getItem function and sets the offset to 0 if this happens. This behavior is required because the first time the clock is loaded into the browser, there will be nothing in local storage.
)
You can find this code in the example Ch03-04_Storing_Adjustable_Clock.
MAKE SOMETHING HAPPEN 13
Scan the QR code or visit https://www.youtube.com/watch?v=J-HvWOc1m6Q for a video walkthrough of this Make Something Happen.
Setting sleuthing
The clock works fine. But there is no way that the user can see the value of the minutes offset when they use the clock. It is not displayed on the page, but does it mean anyone cannot discover this value? Let’s see if we can use the debugger to get that setting value out of the browser. You can start by loading the clock page from the web. You can find it here:
Once you have loaded the page, open the Developer Tools window, select the Sources view, and open the index.html file. Then scroll down in the listing until you find the getTimeString function. This function is called every second to display the time.
)
Set a breakpoint at line 56 by clicking the margin to the left of the line number. This function is called every second, so the breakpoint will be hit almost instantly.
You should see a display like the one shown below in the code window. If you hold the mouse pointer over the minutesOffset variable, you can see the value 20 has been loaded from local storage. This shows how easy it is to view the values in a program as it runs.
However, if you want to see the values stored in local storage, there is an even easier way to do this. If you open the Application tab in the Developer Tools, you can view the contents of Local Storage. As you can see from the image below, the minutesOffset value is stored as 10.
)
Note that this local storage is shared for all the pages underneath the begintocode.com domain. In other words, any of our example JavaScript applications can view and change that value. You can use this view to investigate the things web pages store on your computer.