【JS红宝书学习笔记】第25章 客户端存储

第25章 客户端存储

Cookie

HTTP是无状态的，也就是说，你这次访问服务器，关闭后再次访问服务器，服务器是意识不到又是你来访问的。
登录时，浏览器需要帮我们在每一次请求里加入用户名和密码，这样才能做到保持登录
可以实现每次http请求都自动带数据给服务器的技术——cookie
域、路径、过期时间和 secure 标志用于告诉浏览器什么情况下应该在请求中包含 cookie。这些参数并不会随请求发送给服务器，实际发送的只有 cookie 的名/值对。
cookie的基本流程：

cookie就是一种存储在浏览器的数据而已，需要在http协议环境下才能使用
优点：兼容性好，请求头自带cookie
缺点：打开浏览器，可以看到保存了哪些cookie，所以很不安全；数据体积小
使用：
创建cookie： 使用document.cookie属性来设置cookie的值，并指定cookie的名称、值、过期时间等信息。（名称和值必需）
设置 cookie 的格式如下：

name=value; expires=expiration_time; path=domain_path; domain=domain_name; secure

document.cookie = "color=red; expires="+(new Date("2024-7-14"));
document.cookie = "宽度=100px; expires="+(new Date("2024-7-14"));
document.cookie = "height=200px; expires="+(new Date("2024-7-14"));

删除cookie： 通过将cookie的过期时间设置为过去的时间来删除cookie。

document.cookie = "color=; expires="+(new Date("1970-1-1"));
document.cookie = "width=; expires="+(new Date("1970-1-1"));

获取cookie： 通过解析document.cookie属性的值来读取cookie的内容。

var str = document.cookie;
console.log("缓存的数据:",str);

**修改cookie：**修改cookie的内容可以通过重新设置相同名称的cookie来实现。

 document.cookie = "color=blue; expires="+(new Date("1970-1-1"));

Session会话
浏览器和服务器是在进行会话的，那么浏览器访问服务器就是会话的开始
但是会话结束的时间比较模糊，因为关掉网页可能只是按错而已
因此不同的网站对于每个用户的会话都设定了时间（结束会话的时间）以及唯一的ID（Session ID，一串没有规律的字符串）
服务器自己定义的东西一般会保存在数据库里面

Web Storage

Web Storage 的目的是解决通过客户端存储不需要频繁发送回服务器的数据时使用 cookie 的问题。Web Storage 的第 2 版定义了两个对象：localStorage 和 sessionStorage。localStorage 是永久存储机制，sessionStorage 是跨会话的存储机制。
SessionStorage 和 LocalStorage 使用方法基本一致，唯一不同的是，一旦关闭页面，SessionStorage 将会删除数据。

SessionStorage

只存储会话数据，浏览器关闭时数据会消失。但是页面刷新时不受影响，页面崩溃重启后恢复。

LocalStorage

存储在 localStorage 中的数据会保留到通过 JavaScript 删除或者用户清除浏览器缓存。数据不受页面刷新影响，也不会因关闭窗口、标签页或重新启动浏览器而丢失。
优点：操作方便，永久存储，兼容性较好
缺点： 保存值的类型限定，浏览器在隐私模式下不可读取，不能被爬虫

IndexDB

类似于 SQL 数据库的结构化数据存储机制。IndexedDB 存储的是对象，而不是数据表。对象存储是通过定义键然后添加数据来创建的。游标用于查询对象存储中的特定数据，而索引可以针对特定属性实现更快的查询。
IndexedDB 背后的思想是创造一套 API，方便 JavaScript 对象的存储和获取，同时也支持查询和搜索。
H5标准存储方式，他是以键值对进行存储，可以快速读取，适合web场景
什么情况下适合使用 IndexedDB？
存储大量数据的应用程序
不需要持久 Internet 连接仍可工作的应用程序

Web SQL

2010年被W3C废弃的本地数据库数据存储⽅案，但是主流浏览器（火狐除外）都已经有了相关的实现，web sql类似于SQLite，是真正意义上的关系型数据库，⽤sql进行操作，当我们用JavaScript时要进行转换， 较为繁琐。

☆☆☆总结一下：

前端数据存储有5种方式：
（1）cookie：为了解决HTTP协议的无状态问题（也就是每次访问服务器关闭后再次访问，不能意识到是同一用户），一种每次HTTP请求自动带数据的技术。兼容性好。
但是只能存储少量数据，且打开浏览器就能看到很不安全
（2）localstorage：本地存储，永久存储，数据不受页面刷新、关闭的影响
（3）sessionstroage：会话存储，页面关闭数据清空
（4）indexDB：类似SQL数据库存储，但存储的是对象。适用于需要存储大量数据的应用程序和不用网络连接的应用程序。
（5）Web SQL：关系型数据库，使用要用JS转换，较为繁琐