首页 火币pro官网下载文章正文

七爪源码：客户端 Web 存储 API

火币pro官网下载 2022年07月25日 08:23 1077 Connor

作为开发人员，我们都知道从服务器请求每个数据需要时间，而且成本很高。为了克服这个问题，Web 浏览器提供了一个 API 来在浏览器中存储用户特定的数据。让我们看看本博客中浏览器提供的客户端存储 API。

什么是客户端 Web 存储？

Clent 端 Web 存储只不过是 Web 浏览器提供的存储，用于在浏览器中存储用户数据。客户端 Web 存储遵循同源策略来存储用户数据。

什么是同源政策？

同源策略是一种安全机制，站点应具有相同的协议、主机和端口以遵守这些规则。让我们看一些例子来理解同源策略。

让我们以 来了解同源策略

遵循同源策略，因为只有路径更改。

由于协议更改，同源策略失败

由于主机更改，同源策略失败

由于端口更改，同源策略失败

客户端 Web 存储类型

有两种类型的客户端 Web 存储。他们是

本地存储

会话存储

让我们看看它们之间的相同点和不同点。

本地存储和会话存储

本地存储和会话存储有一些相似之处，例如

两者都是窗口对象的对象。

两者都用于存储数据。

两者都使用相同类型的方法。

两者都是独立于浏览器的（即存储在 Chrome 中的数据不能被 firefox 访问）

两者都将数据存储在键值对中。

两者都在页面刷新时保留数据。

本地存储与会话存储

在本地存储中，

可以在不同的选项卡上访问存储在本地存储中的数据，甚至可以在关闭浏览器并重新打开它之后访问。

数据将被持久化，直到用户清除数据。

在会话存储中，

存储在会话存储中的数据将仅可用于会话。即数据仅存储到选项卡/浏览器关闭

如果没有为同一站点打开更多选项卡，则会为每个选项卡创建新的会话存储。

如何使用它？

Local 和 Session 存储都具有相同的四种处理数据的方法。让我们看看每个例子

展开全文

要使用本地存储，

//For setting the data:

localStorage.setItem('name', ' Manikandan')

//For getting the data:

localStorage.getItem('name')

//For removing the data:

localStorage.removeItem('name')

//For clearing all the data

localStorage.clear()

要使用会话存储，

//For setting the data:

sessionStorage.setItem('name', ' Manikandan')

//For getting the data:

sessionStorage.getItem('name')

//For removing the data:

sessionStorage.removeItem('name')

//For clearing all the data

sessionStorage.clear()

需要注意的点

存储字符串时

当您尝试在 Web 存储 API 中存储对象时，您将获得如下输出

//For setting the data:

localStorage.setItem('name',{firstName:"Manikandan",lastName:"Subramaniam"})

//For getting the data:

localStorage.getItem('name')

// The output will be

[object Object]

发生这种情况是因为 Web 存储 API 只能存储字符串，因此它会尝试将对象转换为字符串并将其存储为 [object Object]。 因此，在存储对象时，您必须对对象进行字符串化，而在读取时，您必须将其解析回对象。 让我们看看它的例子。

//For setting the data:

localStorage.setItem('name',JSON.stringify({firstName:"Manikandan",lastName:"Subramaniam"}))

//For getting the data:

JSON.parse(localStorage.getItem('name'))

// The output will be

"firstName": "Manikandan",

"lastName": "Subramaniam"

隐身/私人模式下的行为

在隐身/私人模式下，本地存储数据将仅保留到隐身窗口关闭为止。

概括

我们看到了客户端网络存储

同源政策。

本地存储和会话存储。

使用方法及注意事项。

相关文章

发表评论

火币交易所(huobi) | 火币全球站官网入口 备案号：川ICP备66666666号