会话存储_Web存储API：本地存储和会话存储
会话存储
Introduction
介绍
How to access the storage
如何访问存储
Methods
方法
setItem(key, value)setItem(key, value)getItem(key)getItem(key)removeItem(key)removeItem(key)key(n)key(n)clear()clear()
Methods
方法
Storage size limits
储存空间限制
Desktop
桌面
Mobile
移动
Going over quota
超出配额
Storage size limits
储存空间限制
Developer Tools
开发者工具
Chrome
Chrome
Firefox
火狐浏览器
Safari
苹果浏览器
Developer Tools
开发者工具
介绍 (Introduction)
The Web Storage API defines two storage mechanisms which are very important: Session Storage and Local Storage.
Web存储API定义了两个非常重要的存储机制： 会话存储和本地存储 。
They are part of the set of storage options available on the Web Platform, which includes:
它们是Web平台上可用的存储选项集的一部分，其中包括：
Cookies
饼干
IndexedDB
索引数据库
The Cache API
缓存API
Application Cache is deprecated, and Web SQL is not implemented in Firefox, Edge and IE.
不建议使用应用程序缓存，并且在Firefox，Edge和IE中未实现Web SQL。
Both Session Storage and Local Storage provide a private area for your data. Any data you store cannot be accessed by other websites.
会话存储和本地存储都为您的数据提供了一个专用区域。 您存储的任何数据都无法被其他网站访问。
Session Storage maintains the data stored into it for the duration of the page session. If multiple windows or tabs visit the same site, they will have two different Session Storage instances.
会话存储会在页面会话期间保持存储在其中的数据。 如果多个窗口或选项卡访问同一站点，则它们将具有两个不同的会话存储实例。
When a tab/window is closed, the Session Storage for that particular tab/window is cleared.
关闭选项卡/窗口时，将清除该特定选项卡/窗口的会话存储。
Session storage is meant to allow the scenario of handling different processes happening on the same site independently, something not possible with cookies for example, which are shared in all sessions.
会话存储旨在允许独立处理在同一站点上发生的不同进程的场景，例如，对于所有会话都共享的cookie而言，这是不可能的。
Local Storage instead persists the data until it’s explicitly removed, either by you or by the user. It’s never cleaned up automatically, and it’s shared in all the sessions that access a site.
相反，本地存储将持久存储数据，直到您或用户将其明确删除为止。 它永远不会自动清除，并且会在访问该站点的所有会话中共享。
Both Local Storage and Session Storage are protocol specific: data stored when the page is accessed using http is not available when the page is served with https, and vice versa.
本地存储和会话存储的特定协议 ：当页面使用访问存储的数据http网页时送达不可用https ，反之亦然。
Web Storage is only accessible in the browser. It’s not sent to the server like cookies do.
Web存储只能在浏览器中访问。 它不会像Cookie一样发送到服务器。
如何访问存储 (How to access the storage)
Both Local and Session Storage are available on the window object, so you can access them using sessionStorage and localStorage.
window对象上可以使用本地存储和会话存储，因此可以使用sessionStorage和localStorage访问它们。
Their set of properties and methods is exactly the same, because they return the same object, a Storage object.
它们的属性和方法的集合完全相同，因为它们返回相同的对象，即Storage对象。
The Storage Object has a single property, length, which is the number of data items stored into it.
存储对象具有单个属性length ，它是存储在其中的数据项的数量。
方法 (Methods)
setItem(key, value) (setItem(key, value))
setItem() adds an item to the storage. Accepts a string as key, and a string as a value:
setItem()将一个项目添加到存储中。 接受字符串作为键，并接受字符串作为值：
localStorage.setItem('username', 'flaviocopes')
localStorage.setItem('id', '123')If you pass any value that’s not a string, it will be converted to string:
如果传递的不是字符串，则将其转换为字符串：
localStorage.setItem('test', 123) //stored as the '123' string
localStorage.setItem('test', { test: 1 }) //stored as "[object Object]" getItem(key) (getItem(key))
getItem() is the way to retrieve a string value from the storage, by using the key string that was used to store it:
getItem()是通过使用存储键值的字符串从存储中检索字符串值的方法：
localStorage.getItem('username') // 'flaviocopes'
localStorage.getItem('id') // '123' removeItem(key) (removeItem(key))
removeItem() removes the item identified by key from the storage, returning nothing (an undefined value):
removeItem()从存储中删除key标识的项目，不返回任何值( undefined值)：
localStorage.removeItem('id') key(n) (key(n))
Every item you store has an index number.
您存储的每个项目都有一个索引号。
It might appear the number is consecutive, so the first time you use
setItem(), that item can be referenced usingkey(0), the next withkey(1)and so on, but it’s not. MDN says “The order of keys is user-agent defined, so you should not rely on it”.它可能看起来是连续的，所以第一次使用
setItem()，可以使用key(0)来引用该项目，而下次使用key(1)来进行引用，依此类推，但并非如此。 MDN表示“密钥的顺序是用户代理定义的，因此您不应依赖它”。
If you reference a number that does not point to a storage item, it returns null.
如果引用的数字不指向存储项目，则返回null 。
clear() (clear())
clear() removes everything from the storage object you are manipulating:
clear()从正在操作的存储对象中删除所有内容：
localStorage.setItem('a', 'a')
localStorage.setItem('b', 'b')
localStorage.length //2
localStorage.clear()
localStorage.length //0储存空间限制 (Storage size limits)
Through the Storage API you can store a lot more data than you would be able with cookies.
通过Storage API，您可以存储的数据比cookie所能存储的更多。
The amount of storage available on Web might differ by storage type (local or session), browser, and by device type. A research by html5rocks.com points out those limits:
Web上可用的存储量可能会因存储类型(本地或会话)，浏览器和设备类型而异。 html5rocks.com的一项研究指出了这些限制：
桌面 (Desktop)
- Chrome, IE, Firefox: 10MB Chrome，IE，Firefox：10MB
- Safari: 5MB for local storage, unlimited session storage Safari：5MB用于本地存储，无限制的会话存储
移动 (Mobile)
- Chrome, Firefox: 10MB Chrome，Firefox：10MB
- iOS Safari and WebView: 5MB for local storage, session storage unlimited unless in iOS6 and iOS7 where it’s 5MB iOS Safari和WebView：5MB用于本地存储，会话存储不受限制，除非在iOS6和iOS7中为5MB
- Android Browser: 2MB local storage, unlimited session storage Android浏览器：2MB本地存储，无限制的会话存储
超出配额 (Going over quota)
You need to handle quota errors, especially if you store lots of data. You can do so with a try/catch:
您需要处理配额错误，尤其是如果您存储大量数据时。 您可以尝试/捕获来做到这一点：
try {
localStorage.setItem('key', 'value')
} catch (domException) {
if (
['QuotaExceededError', 'NS_ERROR_DOM_QUOTA_REACHED'].includes(
domException.name
)
) {
// handle quota limit exceeded error
}
}开发者工具 (Developer Tools)
The DevTools of the major browsers all offer a nice interface to inspect and manipulate the data stored in the Local and Session Storage.
主流浏览器的DevTools都提供了一个不错的界面来检查和操作存储在本地和会话存储中的数据。
Chrome (Chrome)
火狐浏览器 (Firefox)
苹果浏览器 (Safari)
翻译自: https://flaviocopes.com/web-storage-api/
会话存储