Introduction to WEB Storage

What is Web storage?

Web storage is typically similar to an HTTP Cookie. Similar to cookies, Web developers can store each session or domain-specific data as name/value pairs on clients that use WEB storage. However, unlike cookies, Web storage is simpler when you control how information stored in a window is displayed to other windows.

For example, a user might open two browser windows and purchase tickets for two different flights. However, if the airline's WEB application uses cookies to store its session state, the information may be "leaked" from one transaction to another, causing the user to purchase two tickets for the same flight without notice. Because the functionality of an application's offline behavior, such as storing values locally for later return to the server, becomes more powerful, the risk of such information being "compromised" is increasing.

In addition, WEB storage provides a much larger disk space than cookies. In Windows Internet Explorer, cookies can store only 4,000 kilobytes (KB) of data. This byte can be either a 4 KB name/value pair or 20 name/value pairs with a total size of 4 KB. In contrast, Web storage provides a size of approximately 10 megabytes (MB) for each storage area.

Functionally, the client storage area is completely different from the Cookie. WEB storage does not use each request to pass values to the server as cookies do, and the data in the local storage area does not expire. Another difference from cookies is that Web Storage can use standard interfaces to access individual data, and this standard interface is increasingly supported by browser vendors.

Web Storage Script Object

• Window.sessionstorage

• Window.localstorage
• Storage objects

Window.sessionstorage

Session storage is for situations where a user executes a single transaction. window

The sessionstorage property of an object maintains key/value pairs for all pages loaded during the lifetime of a single tab (during the top-level browsing context). For example, a page might contain a check box. If the user selects this check box, it means that the user wants insurance.

（label） （input type="checkbox"

onchange= "sessionstorage.insurance = checked") I want insurance on

This

Trip. (/label)

The subsequent page may be scripted to check whether the user has selected this check box.

if

(sessionstorage.insurance) {...}

Storage

Object supports extended properties (for example, "insurance" in the previous example). If the property name does not exist, a key/value pair is created to hold the name. Note that key/value pairs will always be stored as strings. Different data types, such as numbers, Boolean values, and structured data, must be converted to strings to persist in the storage area.

Save to Sessionstorage

, scripts that run on different pages in the same context can be retrieved. When another document is loaded, the sessionstorage of the same original URL is initialized from memory. (See the Security and Privacy section for more information.) ）

Attention

Although HTML5 is allowed, Internet Explorer 8 will not continue to Sessionstorageafter a browser crash recovery.

Window.localstorage

The local storage mechanism expands to multiple windows and remains running outside of the current session. Localstorage

property provides a consistent storage area for the domain. This property allows the Web application to store nearly ten MB of user data, such as all documents or the user's Inbox, to improve performance.

For example, a Web site can use the following script to show how many times a user has visited a page.

（p） You have viewed this

Page (span id=

"Count"

) An untold number of (/span) time (s).

(/P) (script)

var storage = Window.localstorage;

If

(!storage.pageloadcount) storage.pageloadcount = 0; Storage.pageloadcount = parseint (Storage.pageloadcount,

10

) + 1; Document.getelementbyidx_xx_x (

' Count '

). InnerHTML = Storage.pageloadcount;

Attention

Before the pageloadcount is incremented, it must be converted to a number using the Parseint method (JScript 5.6).

Each domain and subdomain has its own local storage area. Domains can access the storage areas of a child domain, and subdomains can also access the storage areas of the parent domains. For exampleexample.com

And all subdomains are accessible localStorage[‘example.com‘] . Subdomains localStorage[‘www.example.com‘] are accessible example.com , but not accessible by other subdomains, such as mail.example.com .

Storage objects

The following properties and methods are supported for both session and local storage objects.

Topic content

Clear Removes all key/value pairs from the Web storage area.

constructor Returns a reference to the constructor of an object.

GetItem retrieves the current value associated with the WEB storage key.

Key retrieves the value at the specified index in the collection.

length Retrieves the size of the key/value list.

Remainingspace Retrieves the number of remaining UTF-16 characters allowed by the storage object.

RemoveItem Removes a key/value pair from the Web Storage collection.

SetItem Set the key/value pair.

WEB Storage Events

Internet Explorer fires events every time the data in the storage area is updated, so that information can be synchronized across multiple browser instances or multiple tabs.

The following events are supported.

• Onstorage

• Onstoragecommit

Onstorage

Onstorage

Fires in document when the storage area changes. This event is received for all documents that share the same session context, and for all documents that currently display the same domain or subdomain where the local storage is being submitted.

If the target document

object is currently inactive, Internet Explorer will not fire any events.

Onstoragecommit

Internet Explorer uses an XML file to hold local storage. Onstoragecommit

Event fires when local storage is written to disk.

Security and privacy

The data stored in local storage is much more exposed than the data stored in the cookie, which may be limited to a specific path in a domain. Even using a hard-to-guess key does not ensure that privacy is not violated because Storage

Object provides a way to enumerate the keys.

You can consider the following actions:

• Top-level browse contexts and host names

• SOURCE Determines storage limits
• Clear Storage Area

Top-level browse contexts and host names

The top-level browsing context restricts access to the session storage area. In Internet Explorer, a new browsing context is created for each of the tabs. A script running in a top-level browse context does not have permission to access the storage created in another top-level browsing context. A site can add data to the session store, and any page that is open in the same window in that host name can access that data.

Points

This check does not include evaluation ports and protocols/scenarios.

SOURCE Determines storage limits

The disk quota limit is determined by the domain of the page in which the limit value is set, rather than the domain in which the value is set. This prevents malicious scripts from exhausting the storage quotas for the relevant domain. You can also avoid these scripts using random subdomains to store unlimited amounts of data.

The calculated storage size will be the total length of all key names and values, and a storage area can hold up to 10 million bytes. Remainingspace

property is used to determine the available storage space.

Clear Storage Area

When the last window referencing session state data is closed, the session state is immediately released. However, at any time, the user can clear the storage area by clicking the "Tools" of Internet Explorer

menu, click Delete Browsing History, and then select the cookie check box, and then choose OK. This action clears all sessions and local storage areas of the domain that are not in the Favorites folder and resets the storage quotas in the registry. Clear the Preserve favorite site data check box to delete all storage areas, regardless of their source.

To remove a key/value pair from the storage list, use RemoveItem immediately

Iterate through the collection or use clear to delete all items. Keep in mind that all changes to the local storage area are saved asynchronously to disk.

Introduction to WEB Storage