浏览器存储技术 localStorage 、sessionStorage

  HTML5中与本地存储相关的两个重要内容：Web Storage与本地数据库。其中，Web Storage存储机制是对HTML4中cookie存储机制的一个改善。由于cookie存储机制有很多缺点，HTML5不再使用它，转而使用改良后的Web Storage存储机制。本地数据库是HTML5中新增的一个功能，使用它可以在客户端本地建立一个数据库，原本必须保存在服务器端数据库中的内容现在可以直接保存在客户端本地了，这大大减轻了服务器端的负担，同时也加快了访问数据的速度。

localStorage

 localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。
 localStorage 属性是只读的。

//保存数据语法：
localStorage.setItem("key", "value");		//方法1（官方推荐）
localStorage["key"] = "value";				//方法2
localStorage.key = "value";					//方法3

//读取数据语法：
var lastname = localStorage.getItem("key");		//方法1（官方推荐）
var lastname = localStorage["key"];				//方法2
var lastname = localStorage.key;				//方法3

//删除数据语法：
localStorage.removeItem("key");

//修改语法
localStorage.setItem("key", "newvalue");		//重新保存新值将会覆盖

localStorage 可以在浏览器的 Application 中看到

  目前所有的浏览器中都会把localStorage的值类型限定为 string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换。
  localStorage在浏览器的隐私模式下面是不可读取的。
  localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡。
  localStorage不能被爬虫抓取到。

sessionStorage

 sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

//保存数据语法：
sessionStorage.setItem("key", "value");

//读取数据语法：
var lastname = sessionStorage.getItem("key");

//删除指定键的数据语法：
sessionStorage.removeItem("key");

//删除所有数据：
sessionStorage.clear();

区别

  1、生命周期：localStorage:localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。 sessionStorage的生命周期是在仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。
  2、存储大小：localStorage和sessionStorage的存储数据大小一般都是：5MB
  3、存储位置：localStorage和sessionStorage都保存在客户端，不与服务器进行交互通信。
  4、存储内容类型：localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理
  5、获取方式：localStorage：window.localStorage; sessionStorage; window.sessionStorage;。
  6、应用场景：localStoragese：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据。sessionStorage：敏感账号一次性登录；