Web 存储 API
什么是 Web 存储？
Web 存储更加安全，可以将大量数据存储在用户的浏览器本地，而不会影响网站性能。
Web 存储有两种机制。它们是：
- 会话存储
- 本地存储
会话存储
更改按标签页显示。所做的更改会被保存，并在标签页关闭前对当前页面有效。
本地存储
更改将一直有效，直到我们明确删除为止。所有来源相同的标签页都会显示这些更改。即使我们关闭浏览器或标签页，或者重启操作系统，这些更改也会保留。
会话存储和本地存储中可用的方法和属性有：
- 套装项目
- 获取物品
- 移除项目
- 清除
- 钥匙
- 长度
套装项目
它需要两个参数key。value
window.localStorage.setItem('name', 'Dev Community');
window.sessionStorage.setItem('name', 'Dev Community');
name键和Dev Community值分别在哪里？另请注意，本地存储和会话存储只能存储字符串。
要存储数组或对象，应该将它们转换为字符串。
为此，我们可以JSON.stringify()在存储到 setItem 之前使用该方法。
const person = {
name: "Naveen Chandar",
location: "India"
}
window.localStorage.setItem('user',JSON.stringify(person));
window.sessionStorage.setItem('user',JSON.stringify(person));
可以在 Chrome 开发者工具的应用程序标签页中访问已存储的项目。
获取物品
此方法允许您访问存储在浏览器 localStorage/sessionStorage 对象中的数据。
它只接受一个参数，即存储值时给出的键，并将值作为字符串返回。
window.localStorage.getItem('user');
window.sessionStorage.getItem('user');
这将返回一个值为的字符串。
"{"name":"Naveen Chandar","location":"India"}"
要使用此值，您应该将其转换回对象。
为此，我们使用 JSON.parse() 方法，该方法将 JSON 字符串转换为 JavaScript 对象。
JSON.parse(window.localStorage.getItem('user'));
JSON.parse(window.sessionStorage.getItem('user'));
移除项目
此方法会从存储中删除指定的键（如果存在）。如果不存在与给定键关联的项，则此方法不执行任何操作。
它只接受一个参数，即存储值时给定的键。
window.localStorage.removeItem('user');
window.sessionStorage.removeItem('user');
清除
此方法会清除本地存储中的所有项目。
它不接受任何参数。
window.localStorage.clear();
window.sessionStorage.clear();
```
**Key**
This method is used to get the key on a given position. It will be useful in situations where you need to loop through keys and allows you to pass a number or index to local/session storage to retrieve the name of the key.
```
window.localStorage.key(index);
window.sessionStorage.key(index);
```
**Length**
This property returns the number of data items stored in a given Storage object.
```
window.localStorage.length;
window.sessionStorage.length;
```
**Broswer Support**
It is HTML5 specification and it is supported in all major browsers including IE8. To check whether browser supports for local/session storage
```
if (typeof(Storage) !== "undefined") {
// Code for localStorage/sessionStorage.
} else {
// Sorry! No Web Storage support..
}
```
**Limitations**
* Do not store sensitive user information in local/session storage such as passwords etc.,
* It is not a alternative for a server based database as information is stored only on the browser (client side).
**Difference B/w session storage and local storage**
**Size**
Session storage size is **5MB**
Local storage size is **5MB/10Mb**
**Accessiblity**
Session storage can be accessed only on same tab
Local storage can be accessed anywhere within browser tabs.(Not in Incognito mode).
**Storage Location**
Both session and local storage are stored in browser.
**Expiration Date**
Session storage will be expired once the tab is closed.
Local storage won't get expired unless removing it manually.
**When to use session storage and local storage ?**
Session storage - It should be used when you need to store something that changes frequently.
Local storage - It should be used for long term use where data won't get changed often.
Thank you for reading this post. Have a great day 🙂