浅谈前端存储

诗与远方君
390 阅读2分钟

1 什么是前端存储？

使用浏览器提供的API将一些程序信息存储到用户电脑上， 这样就可以避免在页面刷新导致数据丢失，同时他们都有一个共同的特点， 就是遵循同源策略

2 常见的储存方式

Cookie

生命周期

1 如果是后端通过设置set-cookie 设置它的实效时间
2 如果是前端生成的cookie，默认是seesion会话期间

局限性

1 请求时Cookie会被附加到http请求首部，所以每次请求相当于增加请求的大小
2 http请求因为cookie是明文所以有一定的安全隐患
3 cookie是有大小限制的最大在4kb左右，导致它存储的数据有限

存储API

// 设置 cookie 字段 document.cookie = 'name=Lucy';

// 更好的设置方式： document.cookie = encodeURIComponent('age') + '=' + encodeURIComponent(25);

// 访问 cookie document.cookie

// 删除 cookie（设置存储有效时长为过去时间） var date = new Date(); date.setDate(date.getDate() + '设置时长'); document.cookie = 'name=Lucy;expires=' + date.toUTCString();

Storage

Web Storage API 提供机制， 使浏览器能以一种比使用Cookie更直观的方式存储键/值对, 只存储在web浏览器中，主要包括两种 localStorage, sessionStorage

生命周期

1 localStorage 将会永久保存在web浏览器中，除非是主动删除
2 sessionStorage 仅在当前会话下有效，关闭页面或者浏览器都会导致sessionStorage被清除

局限性

1 不同浏览器有不同的限制，基本上都在5MB左右 2 同步操作，可能会影响到主线程

存储API

    Storage.key()
    该方法接受一个数值 n 作为参数，并返回存储中的第 n 个键名。

    Storage.getItem()
    该方法接受一个键名作为参数，返回键名对应的值。

    Storage.setItem()
    该方法接受一个键名和值作为参数，将会把键值对添加到存储中，如果键名存在，则更新其对应的值。（如果值是引用类型，则需要解析成json字符串）

    Storage.removeItem()
    该方法接受一个键名作为参数，并把该键名从存储中删除。

    Storage.clear()
    调用该方法会清空存储中的所有键名。


IndexDB


IndexedDB 是一种在用户浏览器中持久存储大量数据的方法，属于事务性数据库系统主要有以下几个特点

    1 使用 key-value 键值对储存数据

    2 数据库的操作都是异步的

    3 所有数据库的操作都是基于事务

    4 不使用结构化查询语言， 只通过索引产生的指针来查询




主要概念


  1 数据库: 数据库是一系列相关数据的容器 (IDBDatabase)
  2 对象仓库: 表示允许访问通过主键查找的IndexedDB数据库中的一组数据的对象存储区类比于关系数据库中的表 (IDBObjectStore)
  3 索引: 
  4 事务
avatar
文章
阅读
粉丝