cookies、sessionStorage和localStorage

问题1：请描述cookies、sessionStorage和localStorage的区别？
问题2：有用过本地存储吗？有什么限制？有没有考虑过超出了限制怎么办？

1.localStorage本地存储和sessionStorage会话存储
localStorage 和 sessionStorage属性允许在浏览器中存储 key/value 对的数据。

只读的localStorage属性 可以访问一个document的对象Storage，它存储的数据能在跨浏览器会话保留。

localStorage 类似 sessionStorage，但其区别在于：存储在localStorage的数据可以长期保留，即localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。而当页面会话结束——也就是说，当页面被关闭时，存储在 sessionStorage 的数据会被清除 。

sessionStorage 属性允许你访问一个 sessionStorage 对象,用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

sessionStorage与 localStorage 相似，不同之处在于 localStorage 里面存储的数据没有过期时间设置，而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。**页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。**在新标签或窗口打开一个页面时会在顶级浏览上下文中初始化一个新的会话，这点和 session cookies 的运行方式不同。

【注意】

1.无论数据存储在localStorage还是 sessionStorage ，它们都特定于页面的协议。

2.localStorage中的键值对总是以字符串的形式存储。 (需要注意, 和js对象相比, 键值对总是以字符串的形式存储意味着数值类型会自动转化为字符串类型)

localStorage 与sessionStorage：
[外链图片转存失败(img-hc1EBLBs-1569240394844)(en-resource://database/494:1)]
localStorage 的优势

1、localStorage 拓展了 cookie 的 4K 限制。

2、localStorage 会可以将第一次请求的数据直接存储到本地，这个相当于一个 5M 大小的针对于前端页面的数据库，相比于 cookie 可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的。

2.cookie
Cookie 是一些数据, 存储于你电脑上的文本文件中。

当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。

Cookie 的作用就是用于解决 “如何记录客户端的用户信息”。 但是大小只有4k的限制。

当用户访问 web 页面时，他的名字可以记录在 cookie 中。

在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。

3.存储容量限制
浏览器对于存储数据的大小有限制，限制的大小一般在5M/域，超出则会报Uncaught QuotaExceededError。

因此在开发时应注意控制存储数据保持在限制大小内，并定时清除无用的数据。若要手动删除数据，Chrome浏览器可至chrome://settings/cookies 查看不同网站已使用本地存储的占用空间情况，并进行删除操作。

sessionStorage和localStorage只会存在本地，大小要比cookie大，其中sessionStorage是仅在当前的会话窗口有效，不是所有窗口都可以共享数据的。其它两个是整个浏览器都可以数据共享。

cookie、Sessionstorage、Localstorage快速上手

先说区别

cookie

• 数据大小不能超过4KB。
• 不管是否有需求，cookie数据都会在HTTP请求中携带，在浏览器和服务器中来回传递，占用资源。
• 可以在后端设置修改，数据仅在本地浏览器保存。
• cookie数据可以设置路径，限制cookie只属于某个路径下。
• 默认数据失效是关闭浏览器，也可以设置失效时间

sessionStorage

• 数据大小5M或者更大。
• 不会跟随HTTP请求，所以不会占用资源。
• 数据存储在浏览器仅在浏览器为关闭的状态，关闭窗口后数据就会销毁。可以讲是“临时存储”
• sessionStorage在不同浏览器窗口下不会共享数据，即使打开同一个页面。

localStorage

• 数据大小5M或者更大。
• 不会跟随HTTP请求，所以不会占用资源。
• 数据保存在本地硬件设备（通常指硬盘，也可以是其他），需要用户主动删除，否则就是永久保存 。
• 不同浏览器之间不会共享数据。

cookie使用方法

cookie可以写好封装，也可直接用已经写好的框架这里推荐一吧‘jquery.cookies.2.2.0.min.js’；注意还有有一个是cookie.js的也可以，个人觉得没有“jquery.cookies.2.2.0.min.js”好用。先说一下，JavaScript原生的用法。Cookie 以名/值对形式存储
例如username=John Doe，这里的数据是string类型，如要是其他格式注意进行格式转换。JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookie。
JavaScript 中，创建 cookie 如下所示：document.cookie=“username=John Doe”;
您还可以为 cookie 添加一个过期时间（以 UTC 或 GMT 时间）。默认情况下，cookie 在浏览器关闭时删除：document.cookie=“username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT”;
您可以使用 path 参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面。document.cookie=“username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/”;

设置cookie

function setCookie(cname,cvalue,exdays)
{
  var SetTime = new Date();                                         //设置过期时间
  SetTime.setTime(SetTime.getTime()+(exdays*24*60*60*1000));        //设置过期时间
  var expires = "expires="+SetTime.toGMTString();                   //设置过期时间
  document.cookie = cname + "=" + cvalue + "; " + expires;          //创建一个cookie
}

读取cookie

function getCookie(c_name)
{
if (document.cookie.length>0) 
  {
  c_start=document.cookie.indexOf(c_name + "=")
  if (c_start!=-1)
    { 
    c_start=c_start + c_name.length+1 
    c_end=document.cookie.indexOf(";",c_start)
    if (c_end==-1) c_end=document.cookie.length
    return unescape(document.cookie.substring(c_start,c_end))
    } 
  }
return ""
}

删除cookie

添加/修改cookie并设定过期时间：

`$.cookies.set('cookie_id', 'cookie_value', { hoursToLive: 10 });

这里设置的是过期时间是10小时,还可以这样设置过期时间：

expireDate = new Date();
expireDate.setTime( expireDate.getTime() + ( 10 * 60 * 60 * 1000 ) );
$.cookies.set('cookie_id', 'cookie_value', {expiresAt:expireDate});

获取cookie

$.cookies.get('cookie_id');

删除cookie

$.cookies.del('cookie_id');