前言

在我们写前端html，css，js代码时，当我们想要存储一些数据，对数据持久化时，一般我们都会想到要对接到后端，再通过后端调用数据库进行数据的存储，但是有时候一些小业务中数据量比较小的情况下，就不需要那么麻烦通过连接后端服务器再调用数据库的方式来存储数据了，因为浏览器页面本身就有存储本地数据的方式，这样就可以直接在前端里存储数据了，更加方便存储的操作。今天我们介绍这两种存储方式：①localStorage ②cookie

LocalStorage

浏览器中的LocalStorage是Web存储API的一部分，它提供了一种在用户的浏览器持久化存储数据的一种方法。这一特性是html5提出的，是为了解决之前使用cookie存储数据时遇到的容量小、与服务器交互效率低以及安全性问题。如下是理解LocalStorage的几个关键点：

①数据存储方式：LocalStorage是以键值对的方式存储数据的，并且这些数据会保存在用户的浏览器中，即使浏览器关闭，它仍然存在。。
②存储容量：相比于cookie的4kb大小，localStorage一般会提供更大的存储空间，一般来说大约5M，这让它更加容易存储更多的数据量
③生命周期：浏览器中的localStorage没有自动过期的时间，只有手动删除数据，才能将其从localStorage中删除。
④数据存储在localStorage中仅对创建它的源（即相同的协议、主机名和端口）可用，这是遵循同源策略的安全措施，不同的端口号进行跨域访问是不能得到数据值的。

知道了它的特点，那它到底怎么使用，又如何查看到它的显示数据呢？

在js代码中，可以直接调用localStorage的API进行存储数据，

如此图(key为'id',value为'cc的牛奶ovo')

在浏览器中，通过右键点击检查，再点击应用程序(application)中的localStorage

就可以看到我们存储的键值对了，我们也可以在js代码中利用getItem直接调用

在浏览器中的控制台检查是否输出成功！

注意：还有两个API方法我就不一一展示了，大家感兴趣可以自己去尝试，

• localStorage.removeItem(key)：根据键删除特定的存储项。
• localStorage.clear()：清除该源的所有localStorage数据。

cookie

简单来说，cookie是存储在用户设备(在同一域名下)上的一道字符串，格式为：key=value;expires=""...key2=value;expires=""...;（其中的...为其余的属性，如下图）
cookie主要的两个作用：
①. 会话管理：Cookie帮助服务器识别用户，维持用户的登录状态，实现“记住我”这类功能，确保用户在不同页面间跳转时，能持续保持登录状态。
②. 个性化设置：网站可以利用Cookie存储用户的偏好设置，如语言选择、主题偏好等，以便在用户下次访问时提供定制化的界面。
cookie的主要特征：
①生命周期：Cookie可以设置为会话级（session cookie），在浏览器关闭时自动删除；或是持久化（persistent cookie），在设定的过期时间之前一直存在。
②安全性：虽然Cookie的内容可以被加密，但它们仍然储存在用户设备上，存在被恶意访问的风险。因此，敏感信息不应直接存储在Cookie中，特别是未加密的情况下。
③大小限制：传统Cookie的大小限制在4KB左右，但现代浏览器和服务器可能支持更大体积的Cookie。
④同源策略：Cookie遵循同源政策，即只有创建它的同一源（协议、域名、端口相同）的网页才能访问它。

在网页直观的展示：共有许多项属性，但有些是存储数据时非必要存储的。

在js中要想数据存储到cookie中语法也很简单，直接调用document.cookie="..."（...字符串中写入存入必要填写的键值对的信息--name和value），例如下

此时cookie中就有数据显示了(记得用live server打开html页面，因为cookie保存在一个域名下)

注意：cookie中的数据可以手动删除，也可以通过设置expires根据时间的流逝，cookie中的数据也会随之删除。（默认的expires设置为7天）

localStorage和cookie主要的不同点

• 1、cookie 是字符串，localStorage 是对象（setItem getItem）

• 2、cookie的属性相对多，而localStorage只有键值对属性

• 2、cookie 空间小 存储小 关键数据 4kb 为单位 - 为什么cookie小？
  (因为每次http请求都会带上，所以要控制cookie的大小，不然影响性能)

  • localStorage 大一些 5M

• 3、不同的应用场景

  • cookie 存储用户身份等信息

  • localStorage 存储用户数据
    例如掘金首页文章列表

小结

总结一下，就像家里的小仓库，localStorage和cookie就是前端网页的数据储存好帮手。它们虽小，却能扛起大梁，让网页记住你的喜好，保持登录状态，甚至是个性化的体验定制。想象一下，每次回家，小仓库都知道你喜欢的灯光亮度，为你提前准备好，这就是localStorage的魔力，长期记忆，不离不弃。

而cookie呢，它更像是个细心的管家，随身携带的小本本，记录你临时的需求，帮你快速通过小区门禁，也就是那些需要验证的信息。它虽有时效，但总在关键时刻发挥作用。

选择谁来帮忙，得看你的具体需求。想要数据长期保存，选localStorage准没错；如果关注会话期间的短暂存储，那就跟cookie搭档。两者各有千秋，合理搭配，才能让网页体验更加贴心、流畅。

源文：前端网页自己的”数据仓库“：localStorage和cookie

如有侵权请联系站点删除！