存储与通信篇

本地存储

简单了解一下：
共同点：都是保存在浏览器端，并且是同源的
Cookie：cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下,存储的大小很小只有4K左右。 （key：可以在浏览器和服务器端来回传递，存储容量小，只有大约4K左右）
sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持，localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。（key：本身就是一个回话过程，关闭浏览器后消失，session为一个回话，当页面不同即使是同一页面打开两次，也被视为同一次回话）
localStorage：localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。（key：同源窗口都会共享，并且不会失效，不管窗口或者浏览器关闭与否都会始终生效）
补充说明一下cookie的作用：
保存用户登录状态。例如将用户id存储于一个cookie内，这样当用户下次访问该页面时就不需要重新登录了，现在很多论坛和社区都提供这样的功能。 cookie还可以设置过期时间，当超过时间期限后，cookie就会自动消失。因此，系统往往可以提示用户保持登录状态的时间：常见选项有一个月、三个 月、一年等。
跟踪用户行为。例如一个天气预报网站，能够根据用户选择的地区显示当地的天气情况。如果每次都需要选择所在地是烦琐的，当利用了cookie后就会显得很人性化了，系统能够记住上一次访问的地区，当下次再打开该页面时，它就会自动显示上次用户所在地区的天气情况。因为一切都是在后 台完成，所以这样的页面就像为某个用户所定制的一样，使用起来非常方便定制页面。如果网站提供了换肤或更换布局的功能，那么可以使用cookie来记录用户的选项，例如：背景色、分辨率等。当用户下次访问时，仍然可以保存上一次访问的界面风格。
本地存储对象–web storage

• web storage简介（是为了弥补cookie的不足，而不是替代cookie）

  cookie简介：在客户端存储数据，对于web应用来说，它是一个在客户端与服务器之间来回传送文本值的内置机制。
  1.cookie的不足：
  大小限制：被限制在4k，不能接受文件或邮件那样的大数据
  宽带的限制：cookie数据会在服务器与浏览器间来回传送
  安全风险：频繁传送与数据在网络可见，如果数据不加密，有安全风险
  操作复杂：在客户端使用JavaScript不好操作，但在服务器端却很好操作
  2.综合cookie的优点与缺点，对于较小的数据，使用cookie还是可以的

  web storage简介：也是在客户端存储数据，但是可以存储大量的数据，根据提供的接口，访问数据也很方便。
  1.优势：
  存储容量：更大，safari，等为5mb，ie8以上为每个网域10mb
  零宽带：仅仅存储在本地，不会与服务器发生交互行为，所以没有宽带占用问题
  编程接口：方便数据操作
  独立的存储空间：每个域或者子域都有独立的存储空间，存储空间也是完全独立的，所以不会发生数据混乱

• localstorage（本地存储）和sessionstorage（会话存储）

  对比：
  1.和cookie、session对比：c 和s 完全是服务器可以操作的数据，l和s则完全是浏览器客户端可以操作的数据
  2.local和sessionstorage完全继承同一个storageapi接口。
  3.主要区别在于数据存在的时间范围和页面范围
  | session storage | localstorage |
  |数据会保存到它的窗口或标签关闭时|数据的生命周期比窗口或浏览器的生命周期长|
  |数据只在构建它们的窗口或标签可见 |数据可被同源的每个窗口或标签也共享 |
  要访问同一个localStorage对象，页面必须来自同一域名

  检测浏览器支持web storage
  function checkWebStorage(){
  if(window.localStorage){
  alert(“支持”);
  }else{alert(“不支持”);}
  }
  if(window.sessionStorage){
  alert(“支持session”);
  }else{alert(“不支持session”);}
  window.addEventListener(“load”,checkWebStorage,false);

• 设置和获取storage数据：因为local和sessionstorage拥有完全相同的接口操作数据，所以方法完全相同(键/值)
  保存数据到sessionstorage：window.sessionStorage.setItem(“key”,“value”);
  window.sessionStorage.key=“value”;
  window.sessionStorage[“key”]=“value”;
  从sessionstorage中获取数据：value=window.sessionStorage.getItem(“key”);
  value=window.sessionStorage.key();
  value=window.sessionStorage[“key”];

• storage api的属性和方法:storage为接口(interface storage)
  1、增storage.setitem(“key”,value);
  删:storage.removeitem(“key”);//只能删除一行
  storage.clear();//清空存储中的所有键名
  改storage:setitem();
  查:storage.getitem(“key”);
  storage.key(n);返回存储中以索引为n的键名
  storage.length;//为只读属性，返回数据的存储量；
  2、在使用localstorage和sessionstorage时，上面的方法都可用，但要注意其影响的范围
  3.storage接口的应用: var storage=window.sessionStorage;storage.getitem(key);

• 存储json对象的数据（json不是对象，是一种数据格式）
  虽然webstorage保存{键/值}类型，但是一些浏览器把数据限定为字符串类型 ，而且对于一些复杂结构的数据，管理起来较为混乱，对于复杂结构的数据，可以用json对象来处理。
  1.序列化json格式的数据
  由于storage是以字符串保存数据的，因此在保存json格式的数据之前，需要把json格式的数据保存为字符串，成为序列化
  var stringdata=JSON.stringify(jsonobject);//把json格式的数据对象jsonobject序列化为字符串数据stringdata。
  2.把数据反序列化为json格式的数据对象jsonobject。
  var jsonobject=JSON.parse(stringdata);//反序列也可以使用eval(),但是安全隐患很大，而且parse只反序列化json格式的，否则会出错，eval可以反序列任意的字符串，会有隐患。
  function savestorage(foj){
  var jsonobject=new Object();
  jsonobject.name=foj.name.value;
  jsonobject.age=foj.age.value;
  jsonobject.email=foj.email.value;
  var stringdata=JSON.stringify(jsonobject);//把所有的信息存储为字符串的键值类型
  var storage=window.sessionStorage;
  storage.setItem(“key”+flag,stringdata);//每一个键存储了一个完整的信息
  flag++;
  }
  function show(){
  var result="";
  var storage=window.sessionStorage;
  for(var i=0;i<storage.length;i++){
  var key=storage.key(i);
  var stringdata=storage.getItem(key);
  var jsonobject=JSON.parse(stringdata);
  result=“姓名:”+jsonobject.name+“年龄:”+jsonobject.age;
  }
  document.getElementById(“showmessage”).innerHTML=result;
  }

• storage api的事件
  有时候会有多个网页或标签页同时访问存储的数据的情况，为保证修改的数据能够及时反馈到另一个页面，html5有事件通知机制，会在更新时触发，无论监听的窗口是否存储过该数据，只要与执行存储的窗口是同源的，都会触发。
  1.window.addEventListener(“storage”,EventHandle,true);//只要是同源的storage事件发生，包括local和sessionstorage，都能够因为数据更新而触发事件。
  2.storageevent接口（interface storageevent：event）
  属性:key
  oldValue:
  newValue:
  url
  storageArea:

不同标签之间的存储
https://www.jianshu.com/p/5f0e6d8fd36a
https://blog.csdn.net/zhuzhupozhuzhuxia/article/details/76795472
对于不同标签之间是否刷新，则再仔细看看

• cookie和session篇
  https://blog.csdn.net/liyifan687/article/details/80077928
  https://www.jianshu.com/p/9a561b36e9f3
  1.虽然两个都是能保存状态的，但是cookie是服务器保存在本地机器上存储的一小段文字，发往同一个服务器，是保持客户端状态的，而session是是服务器存储用户数据的类hashtable结构。cookie是网页浏览器用来保存用户信息的文件（保存在客户端？），sessionID和对应的用户信息、用户操作记录在服务器上，这些记录就是session。（保存在服务器端？）服务器发sessionid给客户端，发set-cookie给客户端，客户端发cookie给服务器端。Cookie的最大的作用就是存储sessionId用来唯一标识用户
  2.Session的实现方式和Cookie有一定关系。建立一个连接就生成一个session id，打开几个页面就好几个了，这里就用到了Cookie，把session id存在Cookie中，每次访问的时候将Session id带过去就可以识别了.