localStorage、sessionStorage、cookie详解

localStorage、sessionStorage、cookie详解

引用

CSDN

1.

https://blog.csdn.net/qq_42550235/article/details/138182400

前端浏览器本地存储的三种方式：localStorage、sessionStorage和cookie。本文详细介绍了它们的存储机制、应用场景、属性和使用方法，并通过代码示例展示了具体实现。

一、前言

前端浏览器本地存储的方式有三种，分别是：

• localStorage
• sessionStorage
• cookie

localStorage:

• 生命周期是永久的
• 存放数据大小一般为5MB
• 不参加和服务的通信
• 不能跨浏览器使用
• 应用场景：历史记录、登录

sessionStorage

• 仅在当前会话下有效，关闭页面或者浏览器后被消除
• 存放数据大小一般为5MB
• 不能参与于服务器的通信
• 不能跨浏览器使用
• 应用场景：页面之间的传值，敏感账号的一次性登录

cookie

• 数据存储在浏览器
• 单个cookie数据不能超过4k
• cookie 的信息会在 http 请求的时候携带到服务器
• 可以在 request headers 中查看
• 不能跨浏览器使用
• 应用场景：判断用户是否登录过网站，保存上次登录的时间等信息，浏览计数

区别

• localStorage：内存5Mb，始终有效，在所有同源窗口中都是共享的。
• sessionStorage： 内存5MB, 仅在当前浏览器窗口关闭前有效，在不同的浏览器窗口不共享。
• cookie：不超过4k，设置cookie的过期时间之前一直有效，在所有同源窗口中共享。

相同
这三者都是可以被利用来在浏览器端存储数据，而且都是字符类型的键值对。

二、Cookie介绍

1、cookie

• cookie是按照域名来维系组织的，不同域名下有不同的Cookie
• 每一个Cookie都是一个键值对
• 注意： Cookie 不是缓存，是持久化数据手段（保存在硬盘上）， 缓存数据是用来提高访问速度的。

cookie的来源：cookie存在浏览器，来源于服务器。在网页中我们看见的Cookie都是浏览器访问某个服务器后，服务器返回一个响应报文，在响应header中包含一个/多个Set-Cookie这样的资源（程序员在自己服务代码中写的），浏览器接到响应后，就将Set-Cookie这样的数据白存在浏览器本地。当浏览器保存cookie后下次访问网站，就将Cookie放在header中返回给服务器，服务器就知道，还是之前的客户端。

2、Cookie的属性

• name：一个域名下的name不能相同，相同则会被覆盖
• value：由于cookie规定是名称/值是不允许包含分号，逗号，空格的
• domain：cookie绑定的域名，如果没有设置则自动绑定在当前执行语句的域，同一个域名下二级域名也是 不可以交换cookie的
• expirse：cookie的有效期， 现在被Max-Age取代，以秒为单位，如果为负数表述只在当前窗口有效，一旦关闭，cookie就消失
• secure：secure为true, cookie只会在https和ssl等安全写一下传输
• httpOnly：不能通过javascrip获取用户的cookie

代码表示：

document.cookie="username=mxr; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

3、session

• 服务器每一时刻请求都会很多，服务器未来区分这些请求分别是那个用户的，就需要记录用户和该用户的信息之间的对应关系。
• session会话本质是一个哈希表，用来存放一些键值对；例如用户登录一个网站，Seesion的key就是用户名，value就是该用户的信息。

4、sessionId

• sessionId是由服务器生成的一个“唯一性字符串”，也可以理解为一个身份表示，通过这个，服务器就可以识别对应的用户；
• 从session机制的角度来看，这个唯一性字符串称为 “sessionId”，但在整个登录流程来看，也可以把这个唯一字符称为 “token”
• 注意：Servlet 的 Session 默认是保存在内存中的. 如果重启服务器则 Session 数据就会丢失

5、Session和cookie的具体工作流程

6、cookie的实现
6.1、基本用法

• 创建cookie,每次只能创建一个cookie键值对

document.cookie = "name=cy"

• 设置cookie过期时间

document.cookie = "age=5; expires=Thu, 18 Dec 2043 12:00:00 GMT"

• 读取cookie返回域名下所有的cookie

const name = document.cookie

• 删除cookie, 通过将过期时间指定为原始时间，即可删除

document.cookie = "name=; expires=Thu, 01 Jan 1970 00:00:00 UTC;";

• 通过函数定义cookie

function setCookie(name, value, exdays) {
    var d = new Date()
    d.setTime(d.getTime() + (exdats*24*60*60*1000))
    var expires = "expires=" + d.toUTCString()
    document.cookie = name + "=" + value + ";" + expires
}
function getCookie(name) {
    var name = name + "="
    var ca = document.cookie.split(';')
    for(var i = 0; i < ca.length; i++) {
        var c = ca[i]
        while (c.charAt(0) == '') c = c.substring(1)
        if (c.indexOf(name) != -1) return c.substring(name.length, c.length)
    }
    return ""
}
// 清除cookie
function clearCookie(name) {
    setCookie(name, "", -1) // 表示只在当前页面cookie有效
}

三、localStorage介绍

localStorage理论上是永久有效的，但是在移动设备上的浏览器或者个native App用到webView里，localStorage都是不可靠的，可能会应为各种原因（比如退出App、网络切换、内存不足等原因）被清空。

1、localStorage的用法

• 存储数据：

localStorage.setItem(key, value)

• 获取数据：

localStorage.getItem(key, value)

• 移除数据：

localStorage.removeItem(key, value)

• 清除所有数据

localSorage.clear()

四、sessionStorage

SessionStorage 是会话存储，如果当前标签关闭则表示SessionStorage中存储的数据被浏览器销毁。

1、SessionStorage 的用法

• 存储数据：

SessionStorage .setItem(key, value)

• 获取数据：

SessionStorage .getItem(key, value)

• 移除数据：

SessionStorage  .removeItem(key, value)

• 清除所有数据

SessionStorage .clear()