localStorage、sessionStorage、cookie、session

localStorage 和 sessionStorage

HTML5 提供了两种在客户端存储数据的新方法：localStorage 和 sessionStorage； 两者都是仅在客户端（即浏览器）中保存，不参与和服务器的通信

1. sessionStorage（临时存储） ：为每一个数据源维持一个存储区域，在浏览器打开期间存在，包括页面重新加载 ,关掉浏览器即被清除
2. localStorage（长期存储） ：与 sessionStorage 一样，但是浏览器关闭后，数据依然会一直存在

1. 保存数据到本地

sessionStorage 和 localStorage 的用法基本一致，引用类型的值要转换成JSON

const info = {
        name: 'xiaohua',
        age: 20,
        id: '01'
    };
 sessionStorage.setItem('key', JSON.stringify(info));
 localStorage.setItem('key', JSON.stringify(info));

localStorage.setItem("key", "value");//key为存储数据名，类似与var name="夏尔"中的name类似。 或 localStorage.key="value";//类似于对象的操作方法

2. 从本地存储获取数据

var value=sessionStorage.getItem("key");//value即为所存的值
var value=localStorage.getItem("key");//value即为所存的值

3. 本地存储中删除某个保存的数据

   sessionStorage.removeItem('key');
   localStorage.removeItem('key');

4. 删除所有保存的数据

  sessionStorage.clear();
  localStorage.clear();

5. 监听本地存储的变化

Storage 发生变化（增加、更新、删除）时的 触发，同一个页面发生的改变不会触发，只会监听同一域名下其他页面改变 Storage

6. 提供了key方法用于遍历

function showStorage(){
    for(var i=0;i<localStorage.length;i++){
        //key(i)获得相应的键，再用getItem()方法获得对应的值
        console.log(localStorage.key(i),
                localStorage.getItem(
                        localStorage.key(i)));
    }
}

一、sessionStorage 、localStorage 和 cookie 之间的区别

共同点：都是保存在浏览器端，且同源的。

区别：

1.存储位置不同：

cookie: 数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递；同时还可以限制cookie只属于某个路径下。

sessionStorage、localStorage：不会自动把数据发给服务器，仅在本地保存。

2.存储大小不同：

cookie：只适合保存很小的数据(因为每次http请求都会携带cookie)，如会话标识。

sessionStorage和localStorage： 虽然也有存储大小的限制，但比cookie大得多。

3.数据有效期不同:

sessionStorage：仅在当前浏览器窗口关闭前有效；

localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；

cookie: 只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。

4.作用域不同:

sessionStorage : 不在不同的浏览器窗口中共享，即使是同一个页面；

localStorage:  在所有同源窗口中都是共享的；

cookie: 在所有同源窗口中都是共享的。

二、cookie和session的区别：

1、session保存在服务器，客户端不知道其中的信息；cookie保存在客户端，服务器能够知道其中的信息

2、session中保存的是对象，cookie中保存的是字符串

3、session不能区分路径，同一个用户在访问一个网站期间，所有的session在任何一个地方都可以访问到

而cookie中如果设置了路径参数，那么同一个网站中不同路径下的cookie互相是访问不到的

* sessionStorage 、localStorage 、session、cookie *

简言之：

　　localStorage: 浏览器端持久化存储, 关闭浏览还存在, 最大5MB(基本没限制了)
　　sessionStorage: 浏览器端内存存储, 关闭浏览器不存在
　　session: 服务器端创建, 服务器端保存, 依赖于cookie
　　cookie: 服务器端创建, 浏览器端保存, 请求携带对应cookie, 长度和数量有限制(4kb)