介绍
JavaScriptlocalStorage基本上是浏览器Window对象中的存储。您可以在中存储任何内容localStorage，并且它会在页面加载期间保持不变，即使浏览器关闭并重新打开也是如此
localStorage及其相关的sessionStorage是 Web Storage API 的一部分。我们将在下面详细了解这些
什么是网络存储 API？
Web Storage API 提供了浏览器可以存储键/值对数据（如对象）的方法。
存储在网络存储 API 中的键/值对总是以字符串的形式存在。（整数键自动转换为字符串）
Web Storage API 提供了一组方法，您可以使用它们来访问、删除修改键/值对
Web Storage API 中有两种类型的存储可用
sessionStoragelocalStorage
什么是本地存储？
LocalStrorage是网络存储 API 的一部分。它允许您将持久数据（数据保留在浏览器重新加载以及浏览器关闭和重新打开时）Window作为键/值对字符串存储在浏览器对象中。
localStorage 有五种方法，它们是：
- setItem
- getItem
- removeItem
- clear
- key
sessionStorage 和 localStorage 的区别
和sessionStorage都是localStorageWeb 存储 API 的一部分。
- 仅在浏览器打开之前可用
sessionStorage，当浏览器关闭时，将sessionStorage被删除。（sessionStorage在浏览器重新加载时可用，但在浏览器关闭时 sessionStorage 被删除） - 这
localStorage是持久数据，即使浏览器关闭，localStorage数据仍保留在浏览器中 localStorage可由用户手动删除，当用户处于隐身窗口或隐私窗口且用户关闭浏览器时自动删除
和sessionStorage都localStorage提供了类似的方法来访问和存储浏览器中的数据
我们将更多地了解LocalStorage以下方法
本地存储方法
中有五个方法localStorage。这些方法可让您存储项目、获取项目、删除项目和清除localStorage.
1. setItem()：将数据存储到localStorage
使用 localStorage.setItem API，您可以将键/值对存储在本地存储中。这是一个关于如何存储数据的例子。
window.localStorage.setItem('candy name', 'Mars Bar');
thecandy name是键，theMars Bar是值。正如我们提到的，localStorage 只存储字符串。
您可以在浏览器本身中尝试此操作。这是在 chrome 浏览器中存储数据的示例
localStorage在using中有多种存储数据的方法setItem。您可以通过以下方式访问对象中的数据：
window.localStorage.candyName = 'Mars';
window.localStorage['candyName'] = 'Mars';
window.localStorage.setItem('candyName','mars');
允许但不建议以类似对象的方式存储或访问数据，因为用户生成的密钥可以通过任何类似toString或length或 localStorage 的任何其他内置方法名称
在这种情况下，getItemandsetItem可以正常工作，但 Object like 方法将失败
使用类似对象的符号
2. getItem()：从localStorage中获取数据
使用 getItem API，我们可以检索存储在 localStorage 中的键/值对
getItem() 接受一个键并将值作为字符串返回
这将返回值作为Mars Bar
使用对象表示法
使用对象表示法，您还可以访问数据（尽管不推荐这样做）
window.localStorage.candyName
returns 'Mars'
window.localStorage['candy2']
returns 'turtles'
3. removeItem() 从本地存储中删除一个项目
localStorage您可以使用该removeItem方法删除任何项目
将您需要删除的项目的键传递给该removeItem方法，并将其从localStorage
window.localStorage.removeItem('candies');
让我们使用控制台看看 removeItem 是如何工作的。首先，我们将使用 length 属性来检查本地存储中有多少项
如您所见，当我们使用 length 属性时，它显示localStorage. 在我们删除一个项目后，现在本地存储中只剩下一个项目
4. clear() 清除localStorage
使用Clear()localStorage API 的方法，您可以清除整个 localStorage 并删除 localStorage 中的所有数据
window.localStorage.clear();
让我们使用控制台看看 clear 方法是如何工作localStorage的
我们将使用长度来检查项目的数量localStorage
5. key() 返回存储中的第n个键
key 方法可以传递任何整数，它将返回存储在存储对象中第 n 个键的键
window.localstorage.key(index)
让我们使用控制台看看密钥是如何工作的
我们已经将键/值对放在 localStorage 中，例如
window.localStorage.candyName = 'Mars'
window.localStorage['candy2'] = 'turtles'
让我们使用length检查 localStorage 的内容
window.localStorage.length
如您所知，索引从 0 开始。让我们看看索引 0 处有什么
让我们看看索引 1 是什么
存储属性
length : 存储在本地的键/值对的数量
长度是接口的只读属性localStorage。它返回存储在中的键/值对的数量localStorage
window.localStorage.length
我们可以使用 length 属性来测试是否localStorage填充了。
到目前为止，我们已经多次使用了 length 属性，您可能已经熟悉了。
让我们在不同的用例中使用长度属性来进一步探索它的用途。让我们打开控制台，看看如何使用 length 属性
window.localStorage.length
2
现在 length 属性也可以用来检查 localStorage 是否为空。让我们清除 localStorage，看看如果我们使用 length 属性会发生什么
它返回 0。因此我们知道如果 length 属性返回 0，则 localStorage 为空
存储事件
每当对存储对象进行更改时都会触发存储事件
当窗口有权访问的存储区域在另一个文档的上下文中发生更改时，将 StorageEvent 发送到窗口
存储事件是每当发生更改时都会触发的事件，您可以收听存储事件并在您的网站或应用程序中做出适当的决定。
构造器
StorageEvent()
返回一个新StorageEvent对象
让我们使用控制台创建一个新的 storageEvent() 实例
创建 StorageEvent 的新实例
new window.StorageEvent(keys)
回报
实例属性
Keys (read only)
返回表示已更改的键的字符串。当由 clear() 方法引起变化时，key 属性为 null
newValue(read only)
返回一个字符串，其中包含已更改的键的新值。当使用 clear() 方法或密钥已被删除时为 null
oldValue(read only)
返回具有键的原始值的字符串。如果在之前没有密钥的地方添加了新密钥，则为 null
storageArea(read only)
返回表示受影响的存储区域的存储对象。
url(read only)
返回一个字符串，其中包含密钥被更改的文档的 url
以下是有关 localStorage 的一些有趣事实
localStorage始终以 UTF-16 字符串格式存储。整数键被转换为字符串并存储在localStorage中localStorage数据特定于浏览器和网站的协议。比如在HTTP和HTTPS中是不一样的- 对于从
file本地存储的要求加载的文档是未定义的，并且对于不同的浏览器是不同的 localStorage隐身或私人浏览器在浏览器关闭时被删除
本地存储限制
以下是一些限制localStorage
- 限制最多 5MB 的数据
- 不要存储敏感数据，
localStorage因为它可以很容易地通过跨站点脚本访问 localStorage是同步的意味着它被一个接一个地访问并且- 不要用作
localStorage数据库。
检测 localStorage：测试可用性
浏览器兼容性
LocalStorage 与所有最新的浏览器兼容。只有非常非常旧的浏览器如 Internet Explorer 6 或 7 不支持localStorage
在某些情况下，例如用户处于隐私窗口或用户处于隐身窗口，当用户关闭窗口时数据将立即被删除
用户也可以禁用localStorage
例外情况
securityError
在以下情况下会引发安全错误：
- Origin is not a valid scheme/host/port tuple 错误。当原点使用
file:或data:计划时会发生这种情况。许多现代浏览器将file:origin 视为不透明的 origin。这意味着来自同一文件夹的一个或多个文件被假定为来自不同的来源并且可能触发 CORS 错误 - 该请求违反了政策决定。例如，用户在浏览器上禁用了 localStorage
结论
在本文中，我解释了 及其localStorage方法，以及如何使用它localStorage来保存数据和访问数据、删除数据和修改数据
原文链接：https://juejin.cn/post/7245975053233569852 作者：happyEnding
