1、客户端存储

这是一个通用术语，包含几个独立但相关的 API： Web Storage、Web SQL Database、Indexed Database 和 File Access。每种技术都提供了在用户硬盘上 —— 而非通常存储数据的服务器—— 存储数据的独特方式。这么做主要基于以下两点理由：（a）使 web app 离线可用；（b）改善性能。-----摘自客户端存储 - 腾讯云开发者社区-腾讯云 (tencent.com)

web应用允许使用浏览器提供的API将数据存储在客户端电脑上；
客户端存储遵守“同源策略”，不同的站点页面之间不能相互读取彼此的数据；
在同一个站点的不同页面之间，存储的数据是共享的；
数据的存储有效期可以是临时的，比如关闭浏览器数据就销毁；也可以是永久的，可以在客户端电脑上存储任意时间；
在使用数据存储是需要考虑安全问题，比如银行卡账号密码；
数据的存储方式也有很多种

2、cookie

Cookie，有时也用其复数形式 Cookies。类型为“小型文本文件”，是某些网站为了辨别用户身份，进行Session跟踪而储存在用户本地终端上的数据（通常经过加密），由用户客户端计算机暂时或永久保存的信息。Cookie是一段不超过4KB的小型文本数据，由一个名称（Name）、一个值（Value）和其它几个用于控制Cookie有效期、安全性、使用范围的可选属性组成。

------摘自cookie（储存在用户本地终端上的数据）_百度百科 (baidu.com)

<input type="text" id="card">
<input type="text" id="pwd">
<button onclick="fn()">存用户输入的数据</button>
<script>function fn () {var card=document.querySelector("#card")var pwd=document.querySelector("#pwd")var ex=new Date(new Date().getTime()+1000*60*60*24*30)//设置cookiedocument.cookie=`idcard=${idcard.value}&pwd=${pwd.value};expires=${ex}` }
</script>
<script>window.onload=function(){//获取cookieconsole.log(document.cookie)//"card=123&pwd=abc"var obj=document.cookie.queryparse()console.log(obj)}
</script>

3、localStorage和sessionStorage

主要摘自localStorage和sessionStorage简介 - 知乎 (zhihu.com)

localStorage和sessionStorage具有完全相同的功能并具有相同的API，但是使用sessionStorage时，数据仅保留到关闭窗口或选项卡之前，而使用localStorage时，数据一直保留到用户手动清除浏览器缓存或您的Web应用程序为止清除数据。

与使用cookie相比，localStorage和sessionStorage都具有优势：

数据仅保存在本地，服务器无法读取，从而消除了cookie所带来的安全性问题。
它允许保存更多数据（10Mb大多数浏览器为）。
它使用起来更简单，语法也很简单。

所有现代浏览器也都支持它，因此您可以立即使用它。显然，由于无法在服务器上读取数据，因此cookie仍然有用，尤其是在身份验证方面。

localStorage和sessionStorage是window的两个属性，他们代表同一个Storage对象；

localStorage和sessionStorage的API：

setItem()：将对应的名字和值传递进去，可以实现数据存储；
getItem()：将名字传递进去，可以获取对应的值；
removeItem()：将名字传递进去，可以删除对应的值；
clear()：删除所有的缓存值，不需要参数；
length：属性，获取键值对总数；
key()：传入位置数，获取存储的值的名字；

4、localStorage：永久性保存

setItem(string key, value); //保存
getItem(string key);//获取
clear();//清空
removeItem(sring key)//根据键得到值

input type="text" id="box1">
<button onclick="localStorage1()">LocalStorage存数据</button>
<button onclick="getlocalStorage1()">LocalStorage取数据</button>
<button onclick="newlocalStorage1()">LocalStorage更新数据</button>
<button onclick="removelocalStorage1()">LocalStorage删除数据</button>
<button onclick="clear1()">LocalStorage清除数据</button>
<script>//创建条目//使用localStorage.setItem创建键/值对条目，提供键和值：function localStorage1(){window.localStorage.setItem("username","零零")window.localStorage.setItem("touxiang","https://image.so.com/view?q=%E5%A4%B4%E5%83%8F%E5%9B%BE%E7%89%87&src=srp&correct=%E5%A4%B4%E5%83%8F%E5%9B%BE%E7%89%87&ancestor=list&cmsid=58b24d6871fb24b131057ec2fe576f85&cmras=0&cn=0&gn=0&kn=50&crn=0&bxn=0&fsn=110&cuben=0&pornn=0&manun=48&adstar=0&clw=293#id=b4520a2b37b33ba5dec4207f678f802f&currsn=0&ps=131&pc=131")}//阅读条目//使用localStorage.getItem读取条目：function getlocalStorage1(){var re=window.localStorage.getItem("username")console.log(re)}//更新条目//就像使用setItem创建一个新条目一样，但是使用已经存在的键来更新一个条目：function newlocalStorage1(){window.localStorage.setItem("username","帆帆")var re=window.localStorage.getItem("username")console.log(re)}//删除条目//使用removeItem方法删除条目：function removelocalStorage1(){window.localStorage.removeItem("username")}//清除一切//以下是清除存储在localStorage中的所有内容的方法：function clear1(){window.localStorage.clear()}
</script>

5、sessionStorage:关闭浏览器数据就自动全部删除

sessionStorage.length ：返回一个整数，表示存储在 sessionStorage 对象中的数据项(键值对)数量。
sessionStorage.key(int index) ：返回当前 sessionStorage 对象的第index序号的key名称。若没有返null。
sessionStorage.getItem(string key) ：返回键名(key)对应的值(value)。若没有返回null。
sessionStorage.setItem(string key, string value) ：该方法接受一个键名(key)和值(value)作为参数，将键值对添加到存储中；如果键名存在，则更新其对应的值。
sessionStorage.removeItem(string key) ：将指定的键名(key)从 sessionStorage 对象中移除。
sessionStorage.clear() ：清除 sessionStorage 对象所有的项。

6、localStorage、sessionStorage、cookie三者的区别(面试题)

（1）存储大小

cookie数据大小不能超过4k ；

sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大；

（2）有效时间

localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；

sessionStorage 数据在当前浏览器窗口关闭后自动删除；

cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭；

（3）数据与服务器之间的交互方式

cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端；

sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存；

（4）作用域

localStorage的作用域限制在文档源的；

localStorage同源的文档之间可以相互访问和修改相同名称的数据；

localStorage受浏览器厂商的限制，chrome下存储的数据，360浏览器下不可访问；会得到‘Invalid Date’；

sessionStorage在localStorage的同源策略基础之上，还有更严格的限制：

他还被限制在窗口中，意思是同一个窗口或标签页的不同页面之间可以共享sessionStorage；

但是不同的窗口或标签页之间不能共享sessionStorage，即便他们是同一个页面地址；

这里的窗口是顶级窗口，如果里面有多个iframe，他们之间共享sessionStorage

数据存储-前端缓存技术相关推荐

《次世代数据存储思维与技术》大纲
次世代数据存储思维与技术第一单元:Dialog对话框及自定义 Dialog对话框(4课时) 第二单元:Menu菜单及PopupWindow弹窗 (4课时) 第三单元:双击退出,Notitfcatio ...
处理高并发、大数据存储的网站技术架构
本文转载自: https://zhuanlan.zhihu.com/p/24669514 大型网站技术架构剖析高并发,大流量 40亿.PV.page view.3.5亿,IP. 高可用,高可用MyS ...
特性总览：核心特性、数据存储、Web技术、框架整合与测试
Spring的事件是基于Java的标准事件进行扩展的,但与Java的标准事件会有一些区别资源管理也是继承了Java的资源管理,它的有些API是借鉴了Java核心的底层API的实现 Java默认就支持 ...
大数据存储技术期末复习（自用）
一.题型 1. 判断题(20*2) 2. 简答题(3个*10) 3. 设计题(2个*15) 二.往年题目三.知识点 (1)CAP理论 1.定义一致性C:所有数据备份在同一时刻的值相同.读写请求是原 ...
万亿级日志与行为数据存储查询技术剖析
http://www.sohu.com/a/126082450_355140 目前大数据存储查询方案大概可以分为:Hbase系.Dremel系.预聚合系.Lucene系,本文作者将就自身的使用经验说说 ...
万亿级日志与行为数据存储查询技术剖析——Hbase系预聚合方案、Dremel系parquet列存储、预聚合系、Lucene系...
转自:http://www.infoq.com/cn/articles/trillion-log-and-data-storage-query-techniques?utm_source=infoq& ...
Apache Durid 数据存储(Hadoop概述安装 HDFS概述数据存储遇到的问题)
Apache Durid 数据存储 Apache Durid 数据存储 1. 分布式技术 1.1 为什么需要分布式 1.1.1 计算问题 1.1.2 存储问题 1.2 分布式系统概述 1.3 分布式实 ...
浅谈ASP.NET 缓存技术
缓存是指系统或应用程序将频繁使用的数据保存到内存中,当系统或应用程序再次使用时,能构快速的获取数据.它的弊端在于显示的内容可能不是最新,最精确的.ASP.Net 缓存主要分为两大类: 网页输出缓存和应 ...
Kotlin中的数据存储
数据存储 1 持久化技术简介数据持久化就是指将那些内存中的瞬时数据保存到存储设备中,保证即使在手机或计算机关机的情况下,这些数据仍然不会丢失. 保存在内存中的数据是处于瞬时状态的,而保存在存储设备中 ...

数据存储-前端缓存技术