作为Web开发人员，在 Web浏览器中存储数据以改善用户体验和提升Web应用程序性能是非常常见的。在大多数情况下，可供我们使用就是LocalStorage和SessionStorage。
这些功能不需要长期保存，也不需要入数据库，所以有人可能会考虑使用 Cookie 去进行存储，但是 Cookie 中每条的存储空间为 4k，存储太多的数据时可能会出现存储空间不足的问题
之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。
localStorage与sessionStorage是Web Storage提供的两种存储在客户端的方法。 localStorage：没有时间限制的存储方式。存储的时间可以是一天，二天，几周或几十年！关闭浏览器数据不会随着消失，当再次打开浏览器时，数据依然可以访问！也就是说除非你主动删除数据，否则数据是永远不会过期的。 sessionStorage：保存在session对象当中。用来保存的时间为用户与浏览器的会话时间。即从浏览页面到关闭浏览器为一个会话时间。关闭浏览器，所有的 session数据也会消失！
使用HTML5中的Web Storage API， 可以在客户端存储更多的数据，，可以实现数据在多个页面中共享甚至是同步，对于复杂的数据，可以使用 Web SQL Database API 来实现。
1.区别：vuex存储在内存，localstorage（本地存储）则以文件的方式存储在本地,永久保存；sessionstorage( 会话存储 ) ,临时保存。localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理。
Web Storage 最早是网页超文本应用技术工作组（WHATWG，Web Hypertext Application Technical
WebStorage的目的是克服由cookie所带来的一些限制，当数据需要被严格控制在客户端时，不需要持续的将数据发回服务器。
记录本地存储的相关信息（cookie,sessionStorage,LocalStorage等）的存储信息
localstorage 在浏览器的 API 有两个：localStorage 和sessionStorage 存在于 window 对象中：localStorage 对应 window.localStorage，sessionStorage 对应 window.sessionStorage。 localStorage 和 sessionStorage 的区别主要是在于其生存期。
当谈到 Web 应用的客户端存储时，localStorage API 脱颖而出，它允许开发者直接在浏览器中存储键值对。
localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库
Web Storage为浏览器提供了方便的key value存储，是一种比cookie更加方便简洁的存储方式。也是诸多客户端存储方式中非常常见的一种。
localStorage 是浏览器自带的一个属性，只读的localStorage 属性允许你访问一个Document 源（origin）的对象 Storage；存储的数据将保存在浏览器会话中。localStorage 类似 sessionStorage，但其区别在于：存储在 localStorage 的数据可以长期保留；而当页面会话结束——也就是说，当页面被关闭时，存储在 sessionStorage 的数据会被清除。
版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
前言：我们这篇主要是说JavaScript的本地存储web Storage，首先我们需要了解一下客户端存储的几种方式。
Web 存储允许我们在浏览器里保存简单的 key/value 数据。与 Cookie 相比，Web 存储方式更直观、存储空间更大（一般不超过 5MB）；
很久前整理过 localStorage 和 sessionStorage 的区别的联系，今天再来整理一下他们和 Vuex 中的 $store.state 的区别。
localStorage对象是HTML5的客户端存储持久化数据的方案。为了能访问到同一个localStorage对象，页面必须来自同一个域名，使用同一种协议，在同一个端口上。
(adsbygoogle = window.adsbygoogle || []).push({});
HTML5的Web存储涉及两部分内容，一是数据存储，支持更多本地存储方案；二是文件读取，支持了File API。
Window是浏览器内置的全局对象（也叫顶级对象），我们学习的所有Webapi知识都是基于Window对象实现的。 DOM BOM都是属于window对象
在HTML5 中定义了两种本地存储的，Web Storage 和本地数据库 SQL Database . 用来检查判断浏览器是否支持 Web Storage if(window.localStorage){ //浏览器支持localStorage } if(window.sessionStorage){ //浏览器支持sessionStorage } localStorage 主要作用是将数据保存在客户端中，也就是用户的计算机上。 是基于域的，
原文链接：https://note.noxussj.top/?source=cloudtencent 浏览器缓存主要包含 cookie、 在 HTML5 新标准中新增了本地存储 localStorag
xxxStorage.setItem('key','value'):该方法接收一个键和参数，会把键值对添加到存储中，如果键名存在，更新起对应内容
存储数据：sessionStorage.setItem(key,value) 获取数据：sessionStorage.getItem(key) 删除数据：sessionStorage.remove(key) 删除所有数据：sessionStorage.clear()
indexedDB是一种使用浏览器存储大量数据的方法.它创造的数据可以被查询，并且可以离线使用. IndexedDB对于那些需要存储大量数据，或者是需要离线使用的程序是非常有效的解决方法. indexedDB也遵从同源协议(same-origin policy). 所以你只能访问同域中存储的数据，而不能访问其他域的。
随着移动网络的发展与演化，我们手机上现在除了有原生 App，还能跑“WebApp”——它即开即用，用完即走。一个优秀的 WebApp 甚至可以拥有和原生 App 媲美的功能和体验。WebApp 优异的性能表现，有一部分原因要归功于浏览器存储技术的提升。cookie存储数据的功能已经很难满足开发所需，逐渐被WebStorage、IndexedDB所取代，本文将介绍这几种存储方式的差异和优缺点。
随着前端的技术发展越来越强，网页功能不断增加，越来越复杂的交互和业务需要前端来实现，那么作为前端开发就需要面对越来越庞大的数据体，那么其中一个常用的优化方式就是本地存储一些不变的数据，从而提升页面渲染的速度，减少从服务器获取数据。
浏览器本地存储方案可以分为三个方面，分别为Cookie、Web Storage、IndexedDB。
主要目标： （1）提供一种在cookie之外存储会话数据的路径。 （2）提供一种存储大量可以跨会话存在的数据的机制。
随着互联网的快速发展，基于网页的应用越来越普遍，同时也变得越来越复杂，为了满足日益更新的需求，会经常性的在本地设备上存储数据，例如记录历史活动信息。传统方式使用document.cookie来进行存储，但是由于其存储的空间只有4KB左右，并且需要复杂的操作进行解析，给发开者带来很多不便，为此，HTML5规范提出了网络存储的解决方案。
我们先说说localStorage是做什么用的 用来存取数据，是一种缓存结构，说到缓存我们之前不是有cookie了吗，为什么还要用localStorage？ 我们从下面的例子来看看把
在做项目的过程中，我们经常遇到需要把信息存储在本地的情况，比如权限验证的token、用户信息、埋点计数、客户配置的皮肤信息或语言种类等，我们可以暂存一下避免浏览器不必要的请求和客户多余操作，给客户使用带来方便。
学习元素的知识点，涉及属性，方法，事件。在HTML5出现前，展示视频，音频，动画等，都是使用第三方自主开发，使用最多的工具是flash了。
LocalStores 本地存储就是一个轻量级的sqllite数据库。可以在客户端本地存储数据，用于在断开网络连接的情况下读取本地缓存cookies，LocalStores可以将数据长期保存在客户端，直至人工清除为止，接下来演示下实例：
这里要特别说明一下localStorage的使用也是遵循同源策略的，所以不同的网站直接是不能共用相同的localStorage
LocalStorage 是HTML5中一个方便使用的 API，它为 Web 开发人员 提供了一个易于使用的5MB的存储空间。使用 LocalStorage API 真的再简单不过了。不信看下：
大家好，我是柒八九。我们在网络拾遗之Http缓存文章中，从网络协议的视角介绍了网站「客户端缓存」 中的HTTP缓存策略，并对「强缓存」和「协商缓存」做了较为详细的介绍。
vuex有一个hook方法：store.subscribe((mutation, state) => {}) 每次在mutation方法执行完之后都会调用这个回调函数，返回执行完毕之后的state
对于大多数 web 浏览器，web 存储 API 提供了在浏览器中存储键值对的机制。它通常分为 localStorage 和 sessionStorage，两者之间的主要区别是浏览器存储数据的时间。使用 sessionStorage，「一旦会话结束或浏览器关闭，数据就会被删除」。但是，localStorage 中的数据会一直保存到清除为止。
HTML5在客户端存储数据的新方法——localStorage localStorage作为HTML5本地存储web storage特性的API之一，主要作用是将数据保存在客户端中，而客户端一般是指上海网站设计用户的计算机。 在移动设备上，由于大部分浏览器都支持web storage特性，因此在android和ios等智能手机上的web浏览器都能正常使用该特性。 localStorage保存的数据，一般情况下是永久保存的，也就是说只要采用localstorage保存信息，数据便一直存储在用户的客户端中。即使
localStorage – 没有时间限制的数据存储 sessionStorage – 针对一个 session 的数据存储
移动端sessionStorage缓存失效是我“印象最深的一个bug”之一，为啥呢，因为这个问题导致我加班到很晚。在现在看来就是一个简单的概念问题。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
