浏览器存储

目录

1.localStorage、cookie、 sessionStorage的使用

2.localSstorage、cookie、sessionStorage的区别，如内存大小、生存周期、存储内容限制、作用域等

3.他们各自的特性及使用场景

1.localStorage、cookie、 sessionStorage的使用

•  localStorage:

  • 特点：持久性存储，数据在浏览器关闭后仍然保留。

  • 容量：一般为5MB左右，较大。

  • 使用场景：适用于需要长期保存的数据，例如用户的偏好设置、购物车信息等。 

  • // 存储数据 
    localStorage.setItem('key', 'value');
    // 获取数据 
    const value = localStorage.getItem('key'); 
    // 删除数据 
    localStorage.removeItem('key');

• sessionStorage:

  •  特点：会话级别存储，数据在浏览器关闭后会被清除。

  •  容量：一般为5MB左右，较大。

  •  使用场景：适用于一次会话期间需要共享的临时数据，例如用户登录状态、表单数据等。

  • // 存储数据 
    sessionStorage.setItem('key', 'value'); 
    // 获取数据 
    const value = sessionStorage.getItem('key'); 
    // 删除数据 
    sessionStorage.removeItem('key');

• cookie:
  •  特点：持久性存储，可以设置过期时间。
  •  容量：一般为4KB左右，较小。
  •  使用场景：适用于需要与服务器进行交互的数据，例如用户认证凭证、用户标识等。

  • // 存储数据 
    document.cookie = "key=value; expires=Sun, 07 Aug 2023 02:00:00 UTC; path=/"; 
    // 获取数据 
    const cookies = document.cookie; const value = cookies.split(";").find((cookie) => cookie.includes("key")).split("=")[1]; 
    // 删除数据 
    document.cookie = "key=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

 2.localSstorage、cookie、sessionStorage的区别，如内存大小、生存周期、存储内容限制、作用域等

•  localStorage 和 sessionStorage 是 h5 新增的 api 

• localStorage 和 sessionStorage 只能做本地存储，cookie 除了本地存储的功能，还可用作登录鉴权，cookie 会随着 http 请求自动发送给后端。

•  localStorage 和 sessionStorage 存储空间是 5M，cookie 的存储空间是 4k。 

• localStorage 没有失效时间，除非手动删除，sessionStorage 只是对当前对话生效。cookie 可以设置失效时间。 

•  localStorage 和 sessionStorage api 简单，cookie 的 api 复杂。

3.他们各自的特性及使用场景

• localStorage：

  • 特性：

    •  持久性存储：数据在浏览器关闭后仍然保留。

    •   大容量：一般为5MB左右，较大。

    •   同源共享：对于同一个域名下的不同页面，可以共享同样的 localStorage 数据。

  • 使用场景：

    •  长期保存的数据：适用于需要长期保存的数据，例如用户偏好设置、购物车信息等。

    •  本地缓存：可以使用 localStorage 缓存静态资源（如图片、CSS、JS文件），以减少网络请求，提升页面加载速度。

• cookie：
  •  特性：
    •  可设置过期时间：可以长期保存在用户设备上，也可以设置为会话级别的，在浏览器关闭后会被删除。
    •  较小容量：一般为4KB左右，较小。
    •   跨域共享：可以通过设置 domain 属性来实现跨子域共享。
  • 使用场景：
    • 用户认证凭证：适用于存储用户的登录状态、身份令牌等敏感信息。
    •  与服务器交互的数据：适用于需要与服务器进行交互的数据，例如保存用户的购买记录、购物车信息等。
    • 用于网站分析和广告追踪：可以使用 cookie 来统计用户访问行为、进行个性化广告展示等。
• sessionStorage：
  •  特性：
    •   会话级别存储：数据在浏览器关闭后会被清除。
    •  大容量：一般为5MB左右，较大。
    •   同源独立：对于同一个域名下的不同页面，不会共享 sessionStorage 数据。
  •   使用场景：
    • 临时会话数据：适用于一次会话期间需要共享的临时数据，例如保存表单数据、临时状态信息等。
    •   页面之间的数据传递：可以在不同页面间通过 sessionStorage 进行数据传递和共享。