- HTML5 Web Application Development By Example Beginner's Guide
- J.M. Gustafson
- 524字
- 2021-08-13 16:50:21
Saving the state of the application
We have a pretty functional tasklist application now. We can add, remove, and move tasks around. We can even edit the name of an existing task. There's only one problem. Since we added all of these task elements to the DOM dynamically, they won't be there the next time the user comes back to the application. We need a way to save the tasklist, so the next time the user comes back to the application the tasks will still be there. Otherwise, what's the point?
HTML5 has just the thing for that-Web Storage. Web Storage is a new API in HTML5 that allows you to store information on the client. In the past, the only kind of storage available on the client was cookies. But cookies aren't a great way to store data on the client. They are limited to only a few kilobytes of data and are also included in HTTP requests, inflating their size.
Web Storage, on the other hand, allows us to save much more data (up to 5 MB in most browsers) and adds nothing to the HTTP requests. It consists of two global objects that have the same interface, localStorage
and sessionStorage
. The only difference between the two is that data stored in sessionStorage
goes away when the browser is closed, while data stored in localStorage
doesn't. Since we want to save application data between sessions we will only use localStorage
.
Data is stored as key/value pairs. You can set values using the setItem()
method and retrieve values using getItem()
as follows:
localStorage.setItem("myKey", "myValue"); var value = localStorage.getItem("myKey") // returns "myValue"
If you try to get a value using a key that doesn't exist in localStorage
, it will return null
. If you try to add a value to localStorage
and there is not enough memory left, you will get a QUOTA_EXCEEDED_ERR
exception.
There are a few limitations to localStorage
:
- The user doesn't necessarily have access to anything stored there (although it can be accessed through the browser's developer tools).
- It is shared by all applications in a domain, so the storage limit is shared among all of your applications. This also means that all of your keys among all of your applications must be unique. If two applications use the same key they will end up overwriting each other's data.
- Both keys and values must be strings. If you want to store something that is not a string, you must convert it to a string first. When you pull that value out of storage you must convert it back from a string to the type you're expecting.
Fortunately for us, JavaScript has a utility object called JSON that provides functions to convert values to and from strings. JSON stands for JavaScript Object Notation and is the standard for representing values as strings in a readable format. It is a subset of object literal notation in JavaScript, so if you know how to define object literals you know JSON. The JSON object has two methods; JSON.stringify()
to convert a value to a string, and JSON.parse()
to convert a string back into a value.
- Learn ECMAScript(Second Edition)
- Python自動化運維快速入門(第2版)
- 自己動手寫Java虛擬機
- Python高級編程
- SQL語言從入門到精通
- 基于差分進化的優化方法及應用
- Microsoft System Center Orchestrator 2012 R2 Essentials
- 焊接機器人系統操作、編程與維護
- Python深度學習原理、算法與案例
- 深入理解C指針
- IBM Cognos TM1 Developer's Certification guide
- PhoneGap 4 Mobile Application Development Cookbook
- INSTANT PLC Programming with RSLogix 5000
- Building Clouds with Windows Azure Pack
- Design Patterns and Best Practices in Java