本地存储Storage与Cookie

嗨皮小猪
75 阅读3分钟

本地存储Storage与Cookie

1、Storage

WebStorage主要提供了一种机制，可以让浏览器提供一种比cookie更直观的key、value存储方式：

  • localStorage：本地存储，提供的是一种永久性的存储方法，在关闭掉网页重新打开时，存储的内容依然保留；

  • sessionStorage：会话存储，提供的是本次会话的存储，在关闭掉会话时，存储的内容会被清除； localStorage和sessionStorage两者之间的区别

  • 关闭网页后重新打开，localStorage会保留，而sessionStorage会被删除；

  • 在页面内实现跳转，localStorage会保留，sessionStorage也会保留；

  • 在页面外实现跳转（打开新的网页），localStorage会保留，sessionStorage不会被保留； 页面外跳转比如使用a链接的target属性在新窗口打开

2、Storage常见的方法和属性

localStorage和sessionStorage两者之间的属性和方法都是一样的

一般开发过程中localStorage使用较多

常用属性：

  • Storage.length：只读属性，返回一个整数，表示存储在Storage对象中的数据项数量； 常用方法：
  • Storage.key()：该方法接受一个数值n作为参数，返回存储中的第n个key名称；
  • Storage.getItem()：该方法接受一个key作为参数，并且返回key对应的value；
  • Storage.setItem()：该方法接受一个key和value，并且将会把key和value添加到存储中。
  • Storage.removeItem()：该方法接受一个key作为参数，并把该key从存储中删除；
  • Storage.clear()：该方法的作用是清空存储中的所有key；

3、Storage常见封装

// 通过new生成Cache的时候传入参数选择localStorageOrsessionStorage，默认localStorage
// 提供setItem方法，内部转化为JSON格式
// 提供getItem方法，内部实现将JSON字符串转化为JS对象
// 提供其他常用方法并导出
class Cache {
  constructor(isLocal = true) {
    this.storage = isLocal ? localStorage : sessionStorage;
  }
  setItem(key, value) {
    if (value) {
      this.storage.setItem(key, JSON.stringify(value));
    }
  }
  getItem(key) {
    let value = this.storage.getItem(key);
    if (value) {
      value = JSON.parse(value);
      return value;
    }
  }
  removeItem(key) {
    this.storage.removeItem(key);
  }
  clear() {
    this.storage.clear();
  }
  key(index) {
    return this.storage.key(index);
  }
  length() {
    return this.storage.length;
  }
}

const localCache = new Cache();
const sessionCache = new Cache(false);

export { localCache, sessionCache };

4、IndexedDB

IndexedDB是保存在本地浏览器中，用于在客户端存储大量的结构化数据。

5、cookie

网站为了辨别用户身份而存储在用户本地终端（Client Side）上的数据。

  • 浏览器会在特定的情况下携带上cookie来发送请求，我们可以通过cookie来获取一些信息； Cookie总是保存在客户端中，按在客户端中的存储位置，Cookie可以分为内存Cookie和硬盘Cookie。

  • 内存Cookie由浏览器维护，保存在内存中，浏览器关闭时Cookie就会消失，其存在时间是短暂的；

  • 硬盘Cookie保存在硬盘中，有一个过期时间，用户手动清理或者过期时间到时，才会被清理； 通过是否设置过期时间来辨别内存cookie或是硬盘cookie

  • 没有设置过期时间，默认情况下cookie是内存cookie，在关闭浏览器时会自动删除；

  • 有设置过期时间，并且过期时间不为0或者负数的cookie，是硬盘cookie，需要手动或者到期时，才会删除； cookie的常见属性

1、cookie的生命周期：

  • 默认情况下的cookie是内存cookie，也称之为会话cookie，也就是在浏览器关闭时会自动被删除；
  • 通过设置expires或者max-age来设置过期的时间； 2、cookie的作用域：（允许cookie发送给哪些URL）

3、Domain：指定哪些主机可以接受cookie

4、Path：指定主机下哪些路径可以接受cookie

cookie的缺点

  • 每次http请求都会携带cookie，造成流量的浪费
  • 在headers中采用明文传输
  • 大小限制为4kb
  • 使用cookie验证登录存在缺陷，部分平台不能很好的携带cookie

————————————————

原文链接：blog.csdn.net/wingchiehpi…

avatar
文章
阅读
粉丝