【js】前端持久化存储

Steve_Wang_ 发布于2019-08-22 18:29 / 3446人阅读

摘要：与服务器端通信每次都会携带在头中，如果使用保存过多数据会带来性能问题。但如果要存储大量的复杂的数据，这并不是一种很好的方案。使用索引存储数据，各种数据库操作放在事务中执行。通过监听正确类型的事件以等待操作完成。

cookie

生命期为只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。存放数据大小为4K左右。有个数限制（各浏览器不同），一般不能超过20个。与服务器端通信：每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题。
http://www.runoob.com/js/js-c...

localStorage

localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。

sessionStorage

为每一个数据源维持一个存储区域，在浏览器打开期间存在，包括页面重新加载

api

sessionStorage 和 localStorage 的用法基本一致，引用类型的值要转换成JSON

保存数据到本地

const info = {
        name: "Lee",
        age: 20,
        id: "001"
    };
    sessionStorage.setItem("key", JSON.stringify(info));
    localStorage.setItem("key", JSON.stringify(info));

从本地存储获取数据

var data1 = JSON.parse(sessionStorage.getItem("key"));
var data2 = JSON.parse(localStorage.getItem("key"));

本地存储中删除某个保存的数据

sessionStorage.removeItem("key");
localStorage.removeItem("key");

删除所有保存的数据

sessionStorage.clear();
localStorage.clear();

监听本地存储的变化

window.addEventListener("storage", function (e) {
        console.log("key", e.key);
        console.log("oldValue", e.oldValue);
        console.log("newValue", e.newValue);
        console.log("url", e.url);
    })

indexedDB

在使用一个技术之前，先搞清楚它是什么，这对你的理解很重要，从DB就可以看出，它肯定是一个数据库，而说到数据库，有两种不同类型的数据库，就是关系型数据库和非关系型数据库，关系型数据库如Mysql、Oracle等将数据存储在表中，而非关系型数据库如Redis、MongoDB等将数据集作为个体对象存储。indexedDB就是一个非关系型数据库，它不需要你去写一些特定的sql语句来对数据库进行操作，因为它是nosql的，数据形式使用的是json，

意义

也许熟悉前端存储的会说，不是有了LocalStorage和Cookies吗？为什么还要推出indexedDB呢？其实对于在浏览器里存储数据，你可以使用cookies或local storage，但它们都是比较简单的技术，而IndexedDB提供了类似数据库风格的数据存储和使用方式。

首先说说Cookies，英文直接翻译过来就是小甜点，听起来很好吃，实际上并不是，每次HTTP接受和发送都会传递Cookies数据，它会占用额外的流量。例如，如果你有一个10KB的Cookies数据，发送10次请求，那么，总计就会有100KB的数据在网络上传输。Cookies只能是字符串。浏览器里存储Cookies的空间有限，很多用户禁止浏览器使用Cookies。所以，Cookies只能用来存储小量的非关键的数据。

其次说说LocalStorage，LocalStorage是用key-value键值模式存储数据，但跟IndexedDB不一样的是，它的数据并不是按对象形式存储。它存储的数据都是字符串形式。如果你想让LocalStorage存储对象，你需要借助JSON.stringify()能将对象变成字符串形式，再用JSON.parse()将字符串还原成对象。但如果要存储大量的复杂的数据，这并不是一种很好的方案。毕竟，localstorage就是专门为小数量数据设计的，所以它的api设计为同步的。而IndexedDB很适合存储大量数据，它的API是异步调用的。IndexedDB使用索引存储数据，各种数据库操作放在事务中执行。IndexedDB甚至还支持简单的数据类型。IndexedDB比localstorage强大得多，但它的API也相对复杂。对于简单的数据，你应该继续使用localstorage，但当你希望存储大量数据时，IndexedDB会明显的更适合，IndexedDB能提供你更为复杂的查询数据的方式。

indexedDB的特性

1.对象仓库
2.事务性
3.基于请求
4.异步

使用

打开数据库并且开始一个事务。

创建一个 object store。

构建一个请求来执行一些数据库操作，像增加或提取数据等。

通过监听正确类型的 DOM 事件以等待操作完成。

在操作结果上进行一些操作（可以在 request 对象中找到）

https://www.cnblogs.com/dengy...
https://segmentfault.com/a/11...

HTML5 Web SQL

HTML5已经会放弃Web SQL Database

云服务器 GPU云服务器持久化数据存储 js前端存储方式 js 持久化保存 js数据实体持久化

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95920.html

前端数据扁平化与持久化

摘要：与持久化工程师花了年时间打造，与同期出现。有持久化数据结构，如等，并发安全。总结篇幅有限，时间也比较晚了，关于前端数据的扁平化与持久化处理先讲这么多了，有兴趣的同学可以关注下，后面有时间会多整理分享。 (PS: 时间就像海绵里的水，挤到没法挤，只能挤挤睡眠时间了~ 知识点还是需要整理的，付出总会有收获，tired but fulfilled~) 前言最近业务开发，从零搭建网页生成器，...

dreamtecher 2019-08-23 11:41 评论0 收藏0
使用 NodeJs 实现一个本地接口数据系统，无需数据库，让前端独立于后台开发

摘要：使用方法介绍下载源码，并执行安装启动服务，。如图，我们创建一个接口可以实时预览格式化的数据和提示错误。使用 NodeJs 实现本地接口系统，解决前后台开发最后一公里无数据库的情况下，实现数据持久化，通过api url返回json 数据，提高前端开发效率！项目地址：local-ajax-pai 实现功能完整的操作页面首页展示所有保存的接口列表创建的接口保存到本地支持重...

JeOam 2019-08-20 12:04 评论0 收藏0
一文带你看懂cookie，面试前端不用愁

摘要：的属性在浏览器的控制台中，可以直接输入来查看。可以在浏览器的控制台中看出哪些是类型的，下带绿色对勾的即是，如图只要是类型的在控制台通过是获取不到的，也不能进行修改。当会话过期或被放弃后，服务器将终止该会话。在中，用取代了。本文由云+社区发表在前端面试中，有一个必问的问题：请你谈谈cookie和localStorage有什么区别啊？ localStorage是H5中的一种浏览器本地存...

notebin 2019-08-23 13:59 评论0 收藏0
关于前端设置过期时间

摘要：前言开发过程少不了会遇到给某个状态设置过期时间的需求例如进入页面有个默认弹窗用户关闭之后在小时之内再次打开不能再弹面对这样需求我们首先想到的是需要设置一个变量去控制弹窗的隐藏因为默认是开启的如何去保证这个变量的有效时间呢这里就涉及到数据的持前言开发过程少不了会遇到给某个状态设置过期时间的需求,例如:进入页面有个默认弹窗,用户关闭之后在 1 小时之内再次打开不能再弹; 面对这样需求我...

UnixAgain 2019-08-23 18:33 评论0 收藏0
前端20个灵魂拷问彻底搞明白你就是中级前端工程师【下篇】

摘要：安装后已经完成了安装，并且等待其他的线程被关闭。激活后在这个状态会处理事件回调提供了更新缓存策略的机会。并可以处理功能性的事件请求后台同步推送。废弃状态这个状态表示一个的生命周期结束。 showImg(https://segmentfault.com/img/bVbwWJu?w=2056&h=1536); 不知不觉，已经来到了最后的下篇其实我写的东西你如果认真去看，跟着去写，应该能有...

fireflow 2019-08-30 15:44 评论0 收藏0