58 lines
1.8 KiB
Markdown
58 lines
1.8 KiB
Markdown
|
---
|
|||
|
title: Window.localStorage
|
|||
|
localeTitle: Window.localStorage
|
|||
|
---
|
|||
|
## window.localStorage
|
|||
|
|
|||
|
`localStorage`为您的Web应用程序提供了一种在用户浏览器中本地存储数据的方法。
|
|||
|
|
|||
|
在HTML5之前,应用程序数据必须存储在cookie中。每个HTTP请求都包含Cookie,从而通过传输相同的数据来减慢Web应用程序的速度。 Cookie也限制在大约4 KB的数据中,这些数据可能不足以存储所需的数据。
|
|||
|
|
|||
|
`localStorage`限制大于cookie,每个域最多10MB数据,并且信息永远不会传输到服务器。
|
|||
|
|
|||
|
### localStorage的类型
|
|||
|
|
|||
|
有两种主要的Web存储类型:
|
|||
|
|
|||
|
* 本地存储:存储没有过期日期的数据。即使用户的浏览器已关闭并重新打开, `localStorage`的数据也会保留。
|
|||
|
* 会话存储:这与`localStorage`类似,不同之处在于它仅存储一个会话的数据。一旦用户的浏览器关闭,该会话将丢失,并且将从浏览器中删除持久数据。
|
|||
|
|
|||
|
### HTML5 localStorage方法
|
|||
|
|
|||
|
`localStorage`附带了一些不同的JavaScript方法,可以很容易地使用它们,让我们来看看:
|
|||
|
|
|||
|
_注意:这些方法适用于两种Web存储类型(本地存储和会话存储)_
|
|||
|
|
|||
|
要设置数据,我们需要执行以下操作:
|
|||
|
|
|||
|
```javascript
|
|||
|
localStorage.setItem('Name', 'somevalue');
|
|||
|
```
|
|||
|
|
|||
|
要从存储中检索一些数据:
|
|||
|
|
|||
|
```javascript
|
|||
|
localStorage.getItem('Name');
|
|||
|
```
|
|||
|
|
|||
|
要删除或删除某些数据,我们可以这样做:
|
|||
|
|
|||
|
```javascript
|
|||
|
localStorage.removeItem('Name');
|
|||
|
```
|
|||
|
|
|||
|
要清除整个存储(不仅仅是单个项目),我们可以使用:
|
|||
|
|
|||
|
```javascript
|
|||
|
localStorage.clear();
|
|||
|
```
|
|||
|
|
|||
|
要获取存储中的属性数:
|
|||
|
|
|||
|
```javascript
|
|||
|
localStorage.length;
|
|||
|
```
|
|||
|
|
|||
|
#### 更多信息:
|
|||
|
|
|||
|
[MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)
|