HTML本地存储的几种及区别

TML本地存储有cookies、 localStorage 、sessionStorage、Web SQL、IndexedDB。

以下是它们的区别

cookies：在HTML5标准前本地储存的主要方式，优点是兼容性好，请求头自带cookie方便，缺点是大小只有4k，自动请求头加入cookie浪费流量，每个domain限制20个cookie，使用起来麻烦需要自行封装
localStorage：HTML5加入的以键值对(Key-Value)为标准的方式，优点是操作方便，永久性储存（除非手动删除），大小为5M，兼容IE8+
sessionStorage：与localStorage基本类似，区别是sessionStorage当页面关闭后会被清理，而且与cookie、localStorage不同，他不能在所有同源窗口中共享，是会话级别的储存方式
Web SQL：2010年被W3C废弃的本地数据库数据存储方案，但是主流浏览器（火狐除外）都已经有了相关的实现，web sql类似于SQLite，是真正意义上的关系型数据库，用sql进行操作，当我们用JavaScript时要进行转换，较为繁琐。
IndexedDB：是被正式纳入HTML5标准的数据库储存方案，它是NoSQL数据库，用键值对进行储存，可以进行快速读取操作，非常适合web场景，同时用JavaScript进行操作会非常方便。

Vue 中，可以使用浏览器本地存储（LocalStorage）来保存和检索数据。LocalStorage 是一种由 HTML5 提供的 Web 存储机制，可让您将数据存储在用户的浏览器中。它与服务器端存储不同，因为它不会将数据存储在服务器上，而是存储在用户设备上的浏览器中。这使得 LocalStorage 非常适合存储需要在用户会话之间或即使离线也需要持久保留的数据。

LocalStorage 是一种键值存储，这意味着您可以使用键来存储和检索值。键可以是任何字符串，值可以是任何字符串、数字、布尔值、对象或数组。但是，由于 LocalStorage 只能存储字符串，因此在存储对象或数组之前，需要先将其序列化为字符串。

以下是使用 Vue 中 LocalStorage 的一些示例：

存储数据

JavaScript

localStorage.setItem('myKey', 'myValue');

检索数据

JavaScript

const myValue = localStorage.getItem('myKey');

console.log(myValue); // 输出：myValue

删除数据

JavaScript

localStorage.removeItem('myKey');

清除所有数据

JavaScript

localStorage.clear();

使用 Vuex 与 LocalStorage 集成

如果您使用 Vuex 来管理应用程序的状态，则可以轻松地将其与 LocalStorage 集成在一起。您可以使用 Vuex 插件，例如 vuex-persist，来自动将 Vuex 状态保存到 LocalStorage 中，并在页面重新加载或用户离线时将其恢复。

以下是一些有关 Vue 中 LocalStorage 的其他资源：

Vue 官方文档：客户端存储

Vuex-persist 文档 [移除了无效网址]

使用 LocalStorage 在 Vue 中存储数据 [移除了无效网址]

请注意，LocalStorage 存在一些限制：

**存储大小：**LocalStorage 的存储大小通常限制为 5MB。

**安全：**LocalStorage 中存储的数据可供任何具有访问用户浏览器的人读取。因此，请勿将敏感数据存储在 LocalStorage 中。

**浏览器支持：**所有现代浏览器都支持 LocalStorage。

HTML5以前我们会使用 cookie，在浏览器端缓存一些数据，例如：登录用户信息，历史搜索信息等等。但是cookie所支持的容量仅仅只有 4k ，也没有专门的api来操作，只能依赖一些开源的库，这里使用 cookies.js 存储和获取cookie信息

// 这是一个cookie值Cookies.set('key', 'value');// 链式调用Cookies.set('key', 'value').set('hello', 'world');// 可以额外设置一些参数Cookies.set('key', 'value', { domain: 'www.example.com', secure: true });// 设置缓存时间Cookies.set('key', 'value', { expires: 600 }); // Expires in 10 minutesCookies.set('key', 'value', { expires: '01/01/2012' });

由此可见用cookie存储有一下几个缺点:

存储数据的量比较小

本身没有方便的api对其进行操作

cookie信息会在http请求时加入到请求头中，既不安全也增加了带宽。

WEB Storage

HTML5 提拱更好的本地存储规范 localStorage 和 sessionStorage , 它们将数据存储在本地，而且在http请求时不会携带 Storage 里的信息, 使用方式也很简单:

localStorage.setItem('key', 'value');

除此之外，

canvas 是 HTML5 提供的一个用于展示绘图效果的标签. canvas 原意画布, 帆布. 在 HTML 页面中用于展示绘图效果. 最早 canvas 是苹果提出的一个方案, 今天已经在大多数浏览器中实现.

canvas 英 ['kænvəs] 美 ['kænvəs] 帆布画布

canvas 的基本用法

基本语法

1. 使用 canvas 标签, 即可在页面中开辟一格区域. 可以设置其 width 和 height 设置该区域的尺寸.

2. 默认 canvas 的宽高为 300 和 150.

3. 不要使用 CSS 的方式设置宽高, 应该使用 HTML 属性.

4. 如果浏览器不支持 canvas 标签, 那么就会将其解释为 div 标签. 因此常常在 canvas 中嵌入文本, 以提示用户浏览器的能力.

5. canvas 的兼容性非常强, 只要支持该标签的, 基本功能都一样, 因此不用考虑兼容性问题.

6. canvas 本身不能绘图. 是使用 JavaScript 来完成绘图. canvas 对象提供了各种绘图用的api.

灵活处理图片标题

<figcaption> 标签表示与 <figure> 元素关联的标题或图例，通常作为例如图片、图表、插图等视觉元素的容器。在早期的 HTML 版本中，<figcaption> 只能用作第一个或最后一个 <figure> 的子标签。HTML5.1 已放宽此限制，现在您可以在 <figure> 容器中的任何位置使用 <figcaption>。

<article>
<h1>The Headline of todays news </h1>
<figure>
<img src="petrolimage.jpeg"alt="Petrol price drops">
<figcaption>Aman fueling up his car at petrol station</figcaption>
</figure>
<p>Thisisthe forth hike inpetrol prices intwo month andthe third incaseof diesel inone fortnight.</p>
</article>

12. 拼写检查

spellcheck 是一个取值可以为空字符串、true 和 false 的枚举属性。如果指定其状态为 true，就表示元素将会接受对其的拼写和语法检查。

element.forceSpellCheck() 将强制用户代理在文本元素上报告检查出来的拼写和语法错误，即使用户从来没将输入聚焦在该元素上。

<pspellcheck="true">
<label>Name: <input spellcheck=" false"id="textbox"></label>
</p>

在线咨询

上一篇：asp.net中文本框textbox联动变化的设置-TextChanged事件
下一篇：在网页开发中，我们需要掌握的常用HTML标签有哪些？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML本地存储的几种及区别

您的项目需求