##1.1.1 What is html5 web local storage (web storage)?

html5web local storage can store the user's browsing data locally. Web local storage is more secure and faster than cookies, and its data is not saved on the server. It can also store large amounts of data without affecting website performance.

html5 introduces two local storage methods: localStorage and sessionStorage.

1.1.2 Client-side storage data localStorage

is used to save website data for a long time (it will not disappear when we close the browser). The saved data has no expiration time and can be manually Delete (that is, delete through js script-delete one, delete all).

localStorage is an object, we detect the localStorage data type through typeof. The result of the detection is that its data type is object.

Commonly used APIs are as follows:

Save data: localStorage.setItem(key, value);

Read data: localStorage.getItem(key);

Delete a single data: localStorage.removeItem(key);

Delete all data: localStorage.clear();

Get the key of an index: localStorage.key(index);

Note: Key/value pairs---usually stored as strings

For example:

First, we declare a variable to store the username username, and assign the value to tom. This value is stored in the client's localStorage.

Preview:

## Next, we comment out localStorage.username = 'Zhang Yi';

Then we print localStorage. username, at this time, we will see the value of username printed out on the console.

Preview:

Save data:

localStorage.setItem(key,value);

localStorage.setItem(key:string, value:string) The data type of key is string string; the data type of value is string string.

Preview:

Read data: localStorage.getItem(key);

Preview:

Delete single data: localStorage.removeItem(key);

Preview:

Delete all data: localStorage.clear();

Preview:

##Get the key of an index: localStorage.key(index);

Preview:

Note:

Key/value pairs---usually stored as strings

The value obtained by localStorage is a string. If we want to perform "calculation", we need to use Number() to convert the string into a number, and then participate in the calculation.

Preview:

#The content entered in the input box in the form is automatically stored in localStorage and displayed after refreshing the page.

预览：

1.1.3 客户端存储数据sessionStorage

sessionStorage存储的数据在用户关闭浏览器窗口后，数据会被删除。

常用的API(和localStorage的api相同)如下所示：

保存数据：sessionStorage.setItem(key,value);

读取数据：sessionStorage.getItem(key);

删除单个数据：sessionStorage.removeItem(key);

删除所有数据：sessionStorage.clear();

获取得到某个索引的key: sessionStorage.key(index);

注意：键/值对 --- 通常以字符串存储

保存数据：sessionStorage.setItem(key,value);

预览：

接着，我们关闭浏览器。再次打开浏览器，打开刚刚我们访问的这个文件的地址，查看Application中sessionStorage中，看是否有数据。结果，我们发现sessionStorage中已经没有数据。如下所示：

由此，我们可以看到sessionStorage只是一次性保存数据。当我们关闭浏览器，或者关闭浏览器的一个窗口后，我们的数据会被删除。

读取数据：sessionStorage.getItem(key);

删除单个数据：sessionStorage.removeItem(key);

删除所有数据：sessionStorage.clear();

获取得到某个索引的key: sessionStorage.key(index);

预览：

1.2 html5中MathML数学标记语言

HTML5 可以在文档中使用 MathML 元素，对应的标签是 $...$。

MathML 是数学标记语言，是一种基于XML（标准通用标记语言的子集）的标准，用来在互联网上书写数学符号和公式的置标语言。

预览：

关于上标 下标，不推荐这样写。我们正常使用html中的上标sup和下标sub去写。

推荐学习：《HTML5视频教程》