几种前端数据存储方式（记录）

1. cookie
cookie生成cookie是存在客户端，session存在服务器端。在cookie当用户第一次访问网页时，服务器会给客户端返回一个cookie，在cookie中保存着服务器端session文件的位置信息，用户第一次访问服务器，服务器就会为它创建一个session文件，并将session的标识保存在cookie中发给它。在这之后，通过为每个请求添加 Cookie HTTP 头将信息发送回服务器。
cookie访问和设置在 JavaScript 中可以通过 document.cookie 设置字段和进行访问。
cookie优点Cookie的大小为4kb。cookie主要应用在保存用户身份信息。
2. localstorage
localStorage介绍：和cookie很类似，但是localStorage的大小有5M；不需要被发送到服务端。还有一个区别localStorage存储的数据是永久性的，其作用域限定在文档源级别（只要URL的协议、端口、主机名三者中有一个不同，就属于不同的文档源）。除此之外，localStorage也受浏览器供应商限制，如果使用chrome访问一个网站，下次用firefox再次访问是获取不到上次存储的数据的。
localstorage特点：页面数据同步
好处localStorage 只能做为提升用户体验的手段，而不能成为客户端逻辑的可靠的、唯一的依赖。方便网页的加载，避免取回数据前页面一片空白，如果不需要最新数据也可以减少向服务端请求的次数，从而减少用户等待从服务器获取数据的时间；网络状态不佳时仍可以显示离线数据。
访问限制只有当前设定localstorage的域下才能访问；单标签页：两个tab（相同域）之间不能互通；刷新或新开 tab 是可以访问到的，关闭浏览器重新打开原先tab也可访问。
localStorage应用：存储一些需要刷新保存并且需要在页面关闭后仍然留下的信息。可以用于保存购物车中的内容；在之前项目中，用于保存上一次的用户浏览标签，并跳转到相应的路径下。
localstorage注意事项：因为性能问题，不能过于依赖 JSON.stringify。value 尽量使用 string。如果需要多次写入localstorage，尽量一次性写入。localstorage是同步执行，可能会阻塞UI
3. sessionstorage
sessionStorage：sessionStorage的有效期仅存在于浏览器的标签页。也就是说如果关闭标签页后，通过sessionStorage存储的数据就都被删除了。sessionStorage的作用域不仅被限制在文档源，还被限定在窗口中，也就是同一标签页中。注意，这里说的窗口是指顶级窗口，如果同一标签页中包含多个

访问限制只有当前设定sessionStorage的域下才能访问；单标签页：两个tab（相同域）之间不能互通；在新开的tab下或者关闭本tab之后再打开，也不能访问之前写下的sessionStorage；刷新本tab可以访问。
应用场景存储一些当前页面刷新需要存储，且不需要在tab关闭时候留下的信息。可以用来检测用户是否是刷新进入的页面，如音乐播放器恢复播放进度条的功能。非常适合单页应用程序，可以方便在各业务模块进行传值。
4. cookie和web storage的区别
Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在，而Web Storage仅仅是为了在本地“存储”数据而生。

5. IndexDB
websql 像关系型数据库，使用 sql 语句进行操作。 indexdb 像 nosql，直接使用 js 方法操作数据。

访问：indexdb与 web storage 一致，均是在创建数据库的域名下才能访问。且不能指定访问域名。
存储时间：存储时间永久，除非用户清除数据，可以用作长效的存储。
大小限制：理论上讲，这种存储的方式是没有大小限制的。然而IndexDB的数据库超过50M的时候浏览器会弹出确认。基本上也相当于没有限制了。
性能测试：indexeddb查询少量数据花费差不多20ms左右。大量数据的情况下，相对耗时会变长一些，但是也就在30MS左右，也是相当给力了，10W数据+l。

IndexedDB 具有以下特点。
key/value的存储方式：IndexedDB和localStorage的存储方式很类似，都是通过一个key对应一个value，而且key是唯一的方式进行存储的，但是indexedDB和localStorage有很不一样的一点，就是可以直接存储对象数组等，不需要想localStorage那样必须转为字符串。
异步调用：IndexedDB是使用异步调用的，当我们存储一个较大的数据时，不会因为写入数据慢而导致页面阻塞。
支持事务：IndexedDB支持事务，如果有用过mysql和mongoDB的人就很清楚了，能确保我们多个操作只要其中一步出现问题，可以整体回滚。
同源限制：IndexedDB和localStorage一样，都是有同源策略的问题，不能跨协议、端口、域名使用。
储存空间：IndexedDB我认为最最最大的优势在于存储空间相比localStorage要大得多，一般来说不少于250MB。
支持二进制：IndexedDB不但可以存储对象，字符串等，还可以存储二进制数据。

什么场景下使用:
在PC的Chorme中是可以存到localStorage的，但是在IOS中，却报出空间不足，无法放入localStorage中，所以这个时候就是使用indexedDB了！因为indexedDB的空间大得我可以完全不去考虑数据大小，而且还能直接以对象的形式存入，无需转为JSON字符串。大大减少了转换的运算。但是因为使用indexedDB和使用localStorage是完全不一样的，基本上都是异步操作而且还要考虑一些低版本的手机可能不支持的情况，所以要封装中间件，同样的调用，根据设备对indexedDB的兼容情况，自动决定使用indexedDB还是localStorage。最终完成需求，并且优化前后达到超过70%的优化率，页面的渲染基本秒开。
大部分主流程的浏览器其实都已经兼容了indexedDB

几种前端数据存储方式（记录）相关推荐

Android中的5种数据存储方式
Android中的5种数据存储方式 Android中的5种数据存储方式数据存储在开发中是使用最频繁的,在这里主要介绍Android平台中实现数据存储的5种方式,分别是: 1 使用SharedPref ...
IOS的四种数据存储方式及优劣
IOS有四种经常使用数据存储方式: 第一种方法:用NSUserDefaults存储配置信息 NSUserDefaults被设计用来存储设备和应用的配置信息.它通过一个工厂方法返回默认的.也是最经常使用 ...
数据存储方式有哪些?这3种数据存储方式了解吗?
数据存储具有很强的现实意义,只有采取合理的数据存储方式,才能够有利于数据的管理.检索等.为增进大家对数据存储方式的认识,本文将对三种数据存储方式予以介绍.如果你对数据存储方式具有兴趣,不妨继续往下阅读 ...
Android的5种数据存储方式概述
Android有5种数据存储方式,具体分类如下: 1.应用内数据存储方式,程序外不可访问:SharedPreferences存储应用场景:存储应用配置信息和常用信息. 获取SharedPrefere ...
js cookie 存储checkbox_浏览器数据存储方式总结，网友：“精辟”！
今天主要来讲下前端的数据存储,说起数据存储,大家肯定第一时间想起cookie,localstorage,sessionstorage,而其实还有userData和IndexedDB这两种数据存储,接下 ...
【clickhouse】ClickHouse表引擎 MergeTree 索引与数据存储方式一级索引二级索引
1.概述转载:ClickHouse表引擎 MergeTree 索引与数据存储方式 2.一级索引 MergeTree 主键使用 primary key 定义,定义主键后,会将数据依据 index_gr ...
前端战五渣学JavaScript——前端数据存储
说起前端数据存储,那就不得不提到Cookie.sessionStorage和localStorage,这是我们接触到的最熟悉的前端数据存储的单词,作为一个前端开发.前端工程师,这三个单词用没用过先不管 ...
Android的数据存储方式,如数据库的基本操作和三级缓存实现--
------------------------------数据存储方式----------------------------- 1 使用SharedPreferences存储数据: void Re ...
《iOS取证实战：调查、分析与移动安全》一3.4　数据存储方式
3.4 数据存储方式 iPhone上的数据以很多方式进行存储.下面的小节涵盖了每一个数据存储的形式以供审查者了解潜在的证据如何定位或恢复. 内部存储: SQLite 数据库文件: 属性列表: 网络: ...

几种前端数据存储方式（记录）

几种前端数据存储方式（记录）相关推荐

最新文章

热门文章