一文了解浏览器存储+sessionStorage+cookie+localStorage

浏览器存储

一、浏览器存储要素概述

浏览器存储主要包括以下几种方式：Cookie、LocalStorage和SessionStorage。它们都是在浏览器端存储数据的机制，但有着不同的特点。

（一）Cookie

1. 基础用法

   • Cookie是服务器发送到用户浏览器并保存在本地的一小块数据。服务器可以通过设置Set - Cookie头信息来创建一个Cookie。例如，在一个Node.js服务器端使用express框架，设置一个名为user_id的Cookie可以这样做：

   const express = require('express');
   const app = express();
   app.get('/', (req, res) => {
        
       res.cookie('user_id', '12345');
       res.send('Cookie set');
   });
   app.listen(3000, () => {
        
       console.log('Server running on port 3000');
   });
   

   • 在浏览器端，可以通过document.cookie来访问和操作Cookie。例如，读取user_id这个Cookie：

   console.log(document.cookie);
   

   • 不过document.cookie返回的是一个包含所有Cookie的字符串，格式为name=value; name2=value2;...，如果要获取特定的Cookie值，需要进行一些字符串处理。

2. 注意事项

   • 大小限制：通常一个Cookie的大小限制在4KB左右，所以不能存储大量的数据。
   • 安全性：由于Cookie会随着每个HTTP请求发送到服务器，如果存储了敏感信息（如密码），很容易被窃取。应该避免在Cookie中存储敏感信息，或者对其进行加密处理。
   • 有效期：可以设置Cookie的有效期，分为会话期Cookie（浏览器关闭后就失效）和持久性Cookie（可以设置过期时间）。例如，设置一个过期时间为1天的Cookie：

   var date = new Date();
   date.setTime(date.getTime()+(1*24*60*60*1000));
   document.cookie = "username=John Doe; expires=" + date.toGMTString();
   

3. 应用场景

   • 身份验证：在用户登录后，服务器可以通过设置一个包含用户身份标识的Cookie来跟踪用户的会话。比如在一个网站登录后，后续的请求可以通过这个Cookie来识别用户是否已经登录。
   • 个性化设置：存储用户的一些偏好设置，如语言、主题等，当用户再次访问网站时，可以根据这些Cookie来提供个性化的体验。

4. 登录记住密码应用实例

   • 当用户勾选“记住我”选项登录网站时，服务器可以在验证用户凭据后，设置一个包含用户登录相关信息（如用户名和一个加密后的密码标识符）的持久性Cookie。在用户下次访问网站时，浏览器会自动带上这个Cookie，服务器可以根据Cookie中的信息来自动登录用户或者提供一个快速登录的选项。不过如前面所说，这种方式存储密码信息有一定风险，所以通常是存储一个可以识别用户身份用于自动登录的令牌（token），而不是明文密码。

（二）LocalStorage

1. 基础用法

   • LocalStorage提供了一种在浏览器中持久存储数据的方法。它是一个简单的键值对存储系统。可以通过localStorage.setItem('key', 'value')来存储数据，例如：

   localStorage.setItem('username', 'John');
   

   • 要读取数据，可以使用localStorage.getItem('key')，如：

   var username = localStorage.getItem('username');
   console.log(username);
   

   • 也可以使用localStorage.removeItem('key')来删除指定的键值对，localStorage.clear()可以清除所有存储的数据。

2. 注意事项

   • 存储容量：不同浏览器的LocalStorage容量限制有所不同，但一般在5MB - 10MB左右。
   • 数据类型：LocalStorage只能存储字符串类型的数据。如果要存储对象等其他数据类型，需要先将其转换为字符串（如使用JSON.stringify()），读取时再进行解析（如使用JSON.parse()）。例如：

   var user = {
        name: 'John', age: 30};
   localStorage.setItem('user', JSON.stringify(user));
   var storedUser = JSON.parse(localStorage.getItem('user'));
   console.log(storedUser);
   

   • 跨域问题：LocalStorage的数据是基于域名隔离的，不同域名下不能直接访问对方的LocalStorage数据。

3. 应用场景

   • 长期保存用户数据：比如保存用户的购物清单，即使浏览器关闭后再次打开，数据依然存在。可以用于离线应用，存储一些应用程序运行所需的数据，如游戏进度等。

4. 登录记住密码应用实例

   • 在登录页面，当用户勾选“记住密码”选项后，可以将用户名和加密后的密码存储在LocalStorage中。下次用户打开登录页面时，可以通过读取LocalStorage中的数据来自动填充用户名和密码字段。不过为了安全起见，密码应该是经过加密处理的，并且在提交密码时，需要再次进行验证。

（三）SessionStorage

1. 基础用法
   • SessionStorage的用法和LocalStorage类似，也是通过setItem、getItem和removeItem等方法来操作键值对。例如：

   sessionStorage.setItem('current_page', 'home');
   var currentPage = sessionStorage.getItem('current_page');
   console.log(currentPage);
   

2. 注意事项
   • 生命周期：SessionStorage的数据在浏览器会话期间有效，即当浏览器窗口或标签页关闭后，数据就会丢失。
   • 存储容量：和LocalStorage类似，有一定的容量限制，一般在5MB - 10MB左右。同样只能存储字符串类型的数据，需要进行类型转换来存储复杂数据类型。
3. 应用场景
   • 存储会话相关的数据：例如在一个多步骤的表单填写过程中，存储用户在当前会话中已经填写的表单数据。如果用户不小心关闭了标签页，这些数据丢失是可以接受的，因为重新开始新的会话时，表单应该是空白的。
4. 登录记住密码应用实例
   • 与LocalStorage用于记住密码不同，SessionStorage可以用于在单次登录会话中记住密码。比如用户在登录后，在同一会话内进行密码相关的操作（如修改密码），可以暂时将原始密码存储在SessionStorage中，方便在操作过程中进行验证等操作，当会话结束（浏览器标签页关闭）后，密码信息自动清除，提高了安全性。

session 应用详解

1. 表单数据暂存

   • 在网页应用中，当用户填写一个包含多个步骤的表单时，SessionStorage可以发挥很好的作用。例如，一个在线购物网站的结账流程，可能包括填写收货地址、选择支付方式、确认订单等多个步骤。
   • 在用户填写收货地址这一步骤后，数据可以存储在SessionStorage中。当用户进入下一个步骤（如选择支付方式）时，这些数据仍然可以被访问和使用。
   • 示例代码如下：

   // 在填写收货地址步骤
   document.getElementById('addressForm').addEventListener('submit', function (e) {
        
       e.preventDefault();
       var address = document.getElementById('address').value;
       sessionStorage.setItem('shippingAddress', address);
       // 跳转到下一个步骤（如选择支付方式）的页面
       window.location.href = 'payment.html';
   });
   // 在支付方式选择页面（payment.html）
   window.addEventListener('load', function () {
        
       var storedAddress = sessionStorage.getItem('shippingAddress');
       if (storedAddress) {
        
           document.getElementById('addressDisplay').innerHTML = storedAddress;
       }
   });
   

   • 这样，即使页面发生跳转，用户之前填写的信息也不会丢失，而且当用户关闭浏览器标签页后，这些数据会自动清除，不会造成数据残留。

2. 用户操作记录保存（在单一会话内）

   • 对于一些具有交互性的网页应用，如在线绘图工具、文本编辑器等，SessionStorage可以用于记录用户在单一会话中的操作步骤。
   • 以在线绘图工具为例，用户绘制的每一笔线条的坐标、颜色、粗细等信息都可以存储在SessionStorage中。这样，当用户在当前会话中进行撤销、重做等操作时，可以方便地从SessionStorage中获取之前的操作记录。
   • 假设绘图工具通过一个数组drawings来记录每次绘制的线条信息，代码可以如下：

   var drawings = [];
   function recordDrawing(drawingInfo) {
        
       drawings.push(drawingInfo);
       sessionStorage.setItem('drawings', JSON.stringify(drawings));
   }
   function undoDrawing