[浏览器系列] ： 客户端本地存储

 

客户端存储

在目前的现代浏览器中主要有以下几种存储方案
1.cookie
2.localStorage
3.sessionStorage
4.indexDB

Cookie

Cokkie 定义

Cookie  是客户端存储数据的选项之一，它主要用于客户端存储会话信息。

它是由服务器在响应 HTTP 请求时，通过发送 Set-Cookie  HTTP  头部包含的会话信息。

浏览器将会话信息存储起来，并在之后的每一个请求中携带Cookie 数据返回给 服务器，来做唯一标识通信。

Cookie 限制

Cookie 是与特定域绑定的。这个限制可以保证只对指定的接受者开放，不能被其它人访问。

Cookie 通常 遵循的限制规则：

1. 不能超过300个Cookie

2. 每个Cookie 不能超过4096 字节

3. 每个域不能超过 20 个 Cookie

4. 每个域不能超过 81920 字节

如果 Cookie  总数超过了 单个域的 上限，浏览器会删除之前的Cookie。

不同浏览器表现不一样

• IE 和 Opera 会按照最近最少使用的原则删除之前的Cookie.

• Firefoxs 随机删除之前的 Cookie

如果创建的Cookie 字节超过了最大限制，则Cookie 会被删除。

Cookie 构成

名称	属性
名称   [ name ]	cookie 唯一标识名称，不区分大小写，建议小写。
值  [ value ]	存储在 cookie 字符串值
域  [ Domain]	cookie 有效域的访问。
路径 [Path=PATH]	指定哪些路由路径必须包含cookie 才可以访问
过期时间  [Expres=DATE]	表示cookie 什么时候被删除。默认情况下(不设置过期时间)，浏览器在关闭时，cookie都会删除
安全标 [Secure ]	设置之后，只在使用SSL安全链接情况下才会把cookie 发送给服务器。
读取cookie [HttpOnly]	设置后只能在服务器上读取，不能再通过JavaScript读取Cookie

缺点

• 容量问题：有上限，最大只能有 4KB

• 性能问题：同一个域名下的所有请求，都会携带 Cookie，某些请求（a,img,link等标签发出的请求）可能不需要此cookie，会加大传输的头部，损耗一定时空开销

• 安全问题：客户端可以通过一定手段（脚本，devtools，本地存储的文件，修改host文件）获取到，存在XSS,CSRF等安全问题

解决安全问题的方案

• 减短cookie的有效时间
• 添加HttpOnly属性：防止本地脚本读取cookie
• 服务端对传送的cookie加密
• 添加Secure属性：使用https协议传输
• 设置samesite属性为需要的值：严格卡控cookie的携带范围

Web Stronge

Web Stronge 的出现 主要是解决 cookie 的问题，存储不需要频繁发送服务端的数据。

它提供了 跨会话 持久化存储大量数据的机制。

Web Stronge 中 定义了两个对象

localStronge	永久存储
sessionStronge	会话存储

Stronge 提供的 方法

clear( ):  删除所有制

getItem( ): 获取指定name 值

removeItem( ) : 删除给定 name 键值对

setItem( ) : 设置给定name 值

优点

• 存储容量大:不同浏览器，存储容量可以达到 5-10M，针对一个域名
• 存储于客户端，不会服务端发生通信

缺点

• 只能存储字符串，JSON对象需要转换为json string 存储
• 只适用于存储少量简单数据
• localStorage需要手动删除

sessionStronge

sessionStronge 对象只存储会话数据，当页面关闭时，意味着会话结束，那么数据会清空。当页面 刷新   /  崩溃 时，数据还会保存在浏览器中，

使用 sessionStronge

// 设置会话key-value
// 属性存储数据
sessionStorage.name = '前端自学社区'
// 方法存储数据
sessionStorage.setItem('title', '测试'） 
                       
                       
// 获取指定name值
sessionStorage.getItem('name')



// 删除会话数据
// 删除所有sessionStronge
sessionStorage.clear
// 删除指定key
sessionStorage.removeItem('name'）
                          
                          
// 获取sessionStronge 个数
sessionStorage.length

localStronge

本地数据持久化，永久的保存在浏览器中，除非主动删除。

由于它 是 Stronge 的实例， 它拥有 Stronge 所有的方法，用法和 sessionStronge 一样。

IndexedDB

运行在浏览器上的非关系型数据库

依旧受同源策略限制

学习资源

本文将不讲述了，日常开发用的少。

• [使用 IndexedDB] : https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API/Using_IndexedDB
• [浏览器数据库 IndexedDB 入门教程] : http://www.ruanyifeng.com/blog/2018/07/indexeddb.html

参考

• 《JavaScript 高级程序设计第四版》
• MDN 资源