这是一个范围极广的问题,许多赞成/反对意见都与情况有关。

在所有情况下,这些存储机制都将特定于单个计算机/设备上的单个浏览器任何在会话间持续存储数据的需求都需要涉及到应用服务器端——很可能使用数据库,但可能是XML或文本/CSV文件。

localstorage、sessionstorage和cookies都是客户端存储解决方案。会话数据保存在您直接控制的服务器上。

本地存储和会话存储

localstorage和sessionstorage是相对较新的api(也就是说,并不是所有的传统浏览器都支持它们),它们几乎完全相同(在api和功能上都是如此),唯一的例外是持久性。sessionStorage(顾名思义)仅在浏览器会话期间可用(并在关闭选项卡或窗口时被删除)-但是,它在页面重新加载后仍然有效(来源 DOM Storage guide - Mozilla Developer Network ).

显然,如果您正在存储的数据需要在持续的基础上可用,那么LoalStor相对于SeStestSt存储更可取——尽管您应该注意到这两个都可以被用户清除,因此在任何情况下都不应该依赖于数据的持续存在。

localstorage和sessionstorage非常适合在页面之间保存客户端脚本中所需的非敏感数据(例如:首选项、游戏中的分数)。本地存储和会话存储中存储的数据可以从客户端/浏览器中轻松读取或更改,因此不应依赖于在应用程序中存储敏感或安全相关的数据。

曲奇饼

这对于cookie也是一样的,用户可以对cookie进行简单的修改,也可以用纯文本从cookie中读取数据——因此,如果您想存储敏感数据,那么会话实际上是您唯一的选择如果您不使用ssl,cookie信息也可以在传输过程中被拦截,特别是在开放的wifi上。

从积极的方面来说,cookies可以通过设置一个仅限http的标志(这意味着现代(支持的)浏览器将阻止javascript访问cookies和值(这也将阻止您自己的合法javascript访问它们),从而对跨站点脚本(xss)/脚本注入等安全风险提供一定程度的保护。这对于身份验证cookie尤其重要,它用于存储包含登录用户详细信息的令牌-如果您有该cookie的副本,则出于所有目的 成为 就web应用程序而言,该用户具有与用户相同的数据访问权限和功能。

由于cookie用于身份验证和用户数据的持久性, 全部的 页面有效的cookie将从浏览器发送到服务器 每一个 对同一域的请求-这包括原始页面请求、任何后续的Ajax请求、所有图像、样式表、脚本和字体因此,cookies不应用于存储大量信息。浏览器还可能对可以存储在cookies中的信息的大小施加限制。通常,cookies用于存储用于身份验证、会话和广告跟踪的标识令牌令牌本身通常不是人类可读的信息,而是链接到应用程序或数据库的加密标识符。

本地存储与会话存储与cookies

在功能方面,cookies、sessionStorage和localStorage只允许存储字符串-在设置时可以隐式转换原始值(这些值在读取后需要转换回用作其类型),但不能转换对象或数组(可以使用JSON序列化它们以使用api存储它们)会话存储通常允许您存储服务器端语言/框架支持的任何原语或对象。

客户端与服务器端

由于http是一种无状态协议-web应用程序在返回到web站点时无法从以前的访问中识别用户-会话数据通常依赖于cookie令牌来识别重复访问的用户(尽管很少url参数可用于相同目的)。数据通常有一个滑动的到期时间(每次用户访问时更新),并且根据您的服务器/框架,数据将存储在进程中(意味着如果Web服务器崩溃或重新启动,数据将丢失),或者存储在状态服务器或数据库的外部。在使用web服务器场(给定网站有多个服务器)时,这也是必需的。

由于会话数据完全由您的应用程序(服务器端)控制,因此它是任何敏感或安全的东西的最佳位置。

服务器端数据的明显缺点是可伸缩性—在会话期间,每个用户都需要服务器资源,并且必须随每个请求一起发送任何需要的客户端数据由于服务器无法知道用户是否导航到另一个站点或关闭浏览器,因此会话数据必须在给定时间后过期,以避免所有服务器资源被放弃的会话占用。因此,在使用会话数据时,应注意数据可能已过期或丢失,特别是在具有长表单的页面上。如果用户删除他们的cookie或切换浏览器/设备,它也将丢失。

一些web框架/开发人员使用隐藏的HTML输入将数据从表单的一个页面持久化到另一个页面,以避免会话过期。

localstorage、sessionstorage和cookies都受“同源”规则的约束,这意味着浏览器应该阻止对数据的访问,设置信息以开头的域除外。

有关客户端存储技术的更多信息,请参见 Dive Into Html 5 是的。

1. LocalStorage

   赞成的意见 以下内容:

   1. web存储可以简单地看作是对cookies的改进,提供了更大的存储容量。如果你看看mozilla的源代码,我们可以看到 5120KB的 ( 5兆 等于 250万字符 是整个域的默认存储大小。与典型的4KB cookie相比,这为您提供了更大的工作空间。
   2. 对于每个http请求(html、图像、javascript、css等),数据不会发送回服务器,这会减少客户端和服务器之间的通信量。
   3. 存储在localstorage中的数据将一直保存到显式删除。所做的更改将被保存,并可用于当前和将来对网站的所有访问。

   欺骗 以下内容:

   1. 它在工作 same-origin policy . 因此,存储的数据只能在同一个原点上使用。

2. Cookies

   赞成的意见:

   1. 与其他人相比,没有什么可怕的。

   欺骗:

   1. 4k限制是针对整个cookie,包括名称、值、到期日期等。为了支持大多数浏览器,请将名称保持在4000字节以下,并将cookie的总体大小控制在4093字节以下。

   2. 对于每个http请求(html、图像、javascript、css等),数据都会发送回服务器,从而增加客户端和服务器之间的通信量。

      通常,允许以下情况:

      • 300个 饼干总计
      • 4096字节 每个cookie
      • 20块饼干 每个域
      • 81920字节 每个域(提供20个最大大小4096=81920字节的cookie。)

3. sessionStorage

   赞成的意见:

   1. 它类似于 localStorage 是的。
   2. 数据不是持久的,也就是说,数据只能在每个窗口(或浏览器中的标签,如chrome和firefox)中使用。数据仅在页面会话期间可用。所做的更改将被保存并可用于当前页面,以及将来在同一窗口中对网站的访问。关闭窗口后,存储将被删除。

   欺骗:

   1. 数据仅在设置它的窗口/选项卡中可用。
   2. 就像 本地存储 ,它工作在 同源策略 是的。因此,存储的数据只能在同一个原点上使用。

结帐 across-tabs -如何方便跨源浏览器选项卡之间的轻松通信。

好啊, 本地存储 它被称为浏览器的本地存储,最多可以节省 10兆 我是说, 会话存储 做同样的事情,但是正如它的名字所说,它是基于会话的,并且在关闭浏览器后将被删除,也可以比localstorage节省更少的空间,比如 5兆 ,但是 曲奇饼 是非常小的数据存储在你的浏览器,可以节省 4KB的 可以通过服务器或浏览器访问…

我还创建了下面的图像,以便一目了然地显示不同之处:

这些是JavaScript中“window”对象的属性,就像document是包含DOM对象的window对象的属性一样。

session storage属性为每个给定的原点维护一个单独的存储区域,该区域在页面会话期间(即只要浏览器处于打开状态)可用,包括页面重新加载和还原。

本地存储也会执行同样的操作,但即使在关闭和重新打开浏览器时仍会继续。

您可以按如下方式设置和检索存储的数据:

sessionStorage.setItem('key', 'value');

var data = sessionStorage.getItem('key');

类似于localstorage。

web存储api提供了一些机制,通过这些机制,浏览器可以以比使用cookies更直观的方式安全地存储密钥/值对。 这个 Web Storage API 扩展 Window 有两个新属性的对象 Window.sessionStorage 和 Window.localStorage . 调用其中一个将创建存储对象的实例,通过该实例可以设置、检索和删除数据项。另一个存储对象用于 sessionStorage 和 localStorage 对于每个原点(域)。

存储对象很简单 键值 存储,类似于对象, 但它们在页面加载过程中保持完整 是的。

localStorage.colorSetting = '#a4509b';
localStorage['colorSetting'] = '#a4509b';
localStorage.setItem('colorSetting', '#a4509b');

键和值总是字符串 是的。存储任何类型 convert it to String 然后储存起来。总是建议使用 Storage interface 方法。

var testObject = { 'one': 1, 'two': 2, 'three': 3 };
// Put the object into storage
localStorage.setItem('testObject', JSON.stringify(testObject));
// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');
console.log('Converting String to Object: ', JSON.parse(retrievedObject));

Web存储中的两种机制如下:

• sessionStorage 为每个给定的来源维护一个单独的存储区域 ^{Same-origin policy} 在页面会话期间(只要浏览器处于打开状态,包括页面重新加载和还原)可以使用。
• localStorage 执行相同的操作,但即使关闭并重新打开浏览器也会继续执行。

Storage « Local storage 将数据写入磁盘,而会话存储仅将数据写入内存。当您的应用程序退出时,写入会话存储的任何数据都会被清除。

这个 maximum storage available is different per browser 但是,大多数浏览器至少实现了W3C推荐的最大存储限制 5兆 是的。

+----------------+--------+---------+-----------+--------+
|                | Chrome | Firefox | Safari    |  IE    |
+----------------+--------+---------+-----------+--------+
| LocalStorage   | 10MB   | 10MB    | 5MB       | 10MB   |
+----------------+--------+---------+-----------+--------+
| SessionStorage | 10MB   | 10MB    | Unlimited | 10MB   |
+----------------+--------+---------+-----------+--------+

总是捕获本地存储安全性和配额超出错误

• QuotaExceededError :当此函数的存储限制超过时 window.sessionStorage.setItem(key, value); ,如果无法设置新值,则抛出“quotaexceederror”DOMException异常(如果用户禁用了站点的存储,或者超出了配额,则设置可能会失败。)

  国内例外。 QUOTA_EXCEEDED_ERR is 22 ,示例 fiddle 是的。

• SecurityError 以下内容: Uncaught SecurityError: Access to 'localStorage' is denied for this document .

  CHROME:-Privacy and security « Content settings « Cookies « Block third-party cookies.
  

StorageEvent 存储区域改变时,存储事件在文档的窗口对象上触发。当用户代理要发送文档的存储通知时,用户代理必须使用StorageEvent将任务排队以在文档对象的窗口对象处触发名为storage的事件。

注:有关真实世界的示例,请参见 Web Storage Demo 是的。 ^{check out the source code}

侦听dom/window上的存储事件以捕获存储中的更改。 fiddle .

曲奇饼 (网络cookie、浏览器cookie) Cookie是数据,作为名称-值对存储在计算机上的小文本文件中。

使用JavaScript访问 Document.cookie

使用Cook.Cookie属性也可以通过JavaScript创建新Cookie,如果没有设置HTTPOnLee标志,也可以从JavaScript访问现有Cookie。

document.cookie = "yummy_cookie=choco"; 
document.cookie = "tasty_cookie=strawberry"; 
console.log(document.cookie); 
// logs "yummy_cookie=choco; tasty_cookie=strawberry"

安全和httponly cookies ^{HTTP State Management Mechanism}

cookies通常在web应用程序中用于标识用户及其经过身份验证的会话

当接收到HTTP请求时,服务器可以发送 Set-Cookie 标题和响应。Cookie通常由浏览器存储,然后在CookieHTTP头中,将Cookie连同向同一服务器发出的请求一起发送。

Set-Cookie: <cookie-name>=<cookie-value> 
Set-Cookie: <cookie-name>=<cookie-value>; Expires=<date>

会话cookies 将在客户端关闭时被删除。它们不指定expires或max age指令。

Set-Cookie: sessionid=38afes7a8; HttpOnly; Path=/

永久饼干 在特定日期(过期)或特定时间长度(最长期限)后过期。

Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly

cookie http请求头包含服务器先前使用set cookie头发送的已存储http cookie。通过document.cookie属性、xmlhttprequest和request api来减轻对跨站点脚本(xss)的攻击,无法通过javascript访问仅限http的cookies。

cookies主要用于三个目的:

• 会话管理 登录名、购物车、游戏分数或服务器应记住的任何内容
• 个性化 用户首选项、主题和其他设置
• 跟踪 (记录和分析用户行为)Cookie有一个与之关联的域。如果此域与您所在页面的域相同,则Cookie称为第一方Cookie。如果域不同,则称为第三方cookie虽然第一方cookie仅发送到设置它们的服务器,但网页可能包含存储在其他域的服务器上的图像或其他组件(如广告横幅)。通过这些第三方组件发送的cookie称为第三方cookie,主要用于在Web上进行广告和跟踪。

Cookies是为了解决“如何记住用户信息”的问题而发明的:

• 当用户访问网页时,他的名字可以存储在cookie中。
• 下次用户访问该页时,属于该页的cookie将添加到请求中这样服务器就可以获得必要的数据来“记住”用户的信息。

基督教徒 Example

作为总结,

• localstorage在不同的选项卡或窗口上持续存在,即使我们关闭浏览器,也会相应地使用域安全策略和用户关于配额限制的选择。
• 如果我们关闭选项卡(顶层浏览上下文),SSESSION存储对象不会持久,因为如果我们通过另一个选项卡或窗口进行冲浪,则它不存在。
• web存储(session,local)允许我们保存大量的键/值对和大量文本,这是通过cookie不可能做到的。
• 用于敏感操作的cookie只能有很短的生存期。
• Cookies主要用于网络广告和跟踪例如,请参见 types of cookies used by Google 是的。
• cookies会随每个请求一起发送,因此它们会降低性能(尤其是对于移动数据连接)。用于客户端存储的现代api是web存储api(localstorage和sessionstorage)和indexeddb。

本地存储: 它保存存储用户信息数据而不带过期日期当用户关闭浏览器窗口时,此数据不会被删除它将在天、周、月和年中可用。

在本地存储中可以存储5-10MB的脱机数据。

//Set the value in a local storage object
localStorage.setItem('name', myName);

//Get the value from storage object
localStorage.getItem('name');

//Delete the value from local storage object
localStorage.removeItem(name);//Delete specifice obeject from local storege
localStorage.clear();//Delete all from local storege

会话存储: 它与本地存储日期相同,只是当web用户关闭浏览器窗口时,它将删除所有窗口。

会话内存储最多可存储5 MB数据

//set the value to a object in session storege
sessionStorage.myNameInSession = "Krishna";

会议 :会话是存储在服务器上的全局变量。每个会话都分配了一个唯一的id,用于检索存储的值。

曲奇饼 :Cookie是数据,作为名称-值对存储在计算机上的小文本文件中。一旦设置了cookie,随后的所有页面请求都将返回cookie名称和值。

本地存储 以下内容:

• Web存储可以简单地看作是对 cookies,提供更大的存储容量可用大小为 比一般的4KB大得多的工作空间 饼干。

• 对于每个HTTP请求,数据不会发送回服务器 (HTML、图像、JavaScript、CSS等)-减少 客户端和服务器之间的通信。

• 存储在localstorage中的数据将一直保存到显式删除。 所做的更改已保存并可用于当前和将来的所有更改 参观现场。

• 它适用于同源策略所以,存储的数据 可在同一产地购买。

饼干:

• 我们可以为每个cookie设置过期时间

• 4k限制是针对整个cookie,包括名称、值、到期日期等。为了支持大多数浏览器,请将名称保持在4000字节以下,并将cookie的总体大小控制在4093字节以下。

• 对于每个http请求(html、图像、javascript、css等),数据都会发送回服务器,从而增加客户端和服务器之间的通信量。

会话存储:

• 它类似于本地存储。

• 更改仅对每个窗口(或浏览器中的选项卡,如chrome和firefox)可用。所做的更改将被保存并可用于当前页面,以及将来在同一窗口中对网站的访问。关闭窗口后,存储将被删除 数据仅在设置它的窗口/选项卡中可用。

• 数据不是永久性的,即一旦窗口/选项卡关闭,数据就会丢失。与localstorage一样,它也适用于同源策略。因此,存储的数据只能在同一个原点上使用。