Web客户端的几种存储方式

一、Cookie存储

在H5之前，Cookie是主要的存储方式。他的主要用途是保存登录信息，可以设置存储的有效期。

存储在浏览器中，每次浏览器向服务器发送请求都需要携带cookie，一般情况下，cookie是产生于服务器端，保存于客户端，但是我们也可以通过js来产生cookie。

通常通过js-cookie这个库来操作cookie

<script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/latest/js.cookie.js"></script>

 Cookie方法：

<script>
  //创建一个cookie,7天后过期
  Cookies.set("name","terry",{ expires: 7 }) 
  //获取cookie
  console.log(Cookie.get('name'));
  //移除cookie
  Cookies.remove('name');
</script>

只针对于服务器，同一个服务器可以共享cookie。存储少量数据，面向服务器的，最大4kb

eg：例如创建了3个cookie，分别用相同的本地浏览器打开，它们都存储在一个浏览器的cookie中，并能同时访问到。

<script>
        Cookies.set('name', 'terry', { expires: 7 })
        console.log(Cookies.get('name'));
</script>

<script>
        Cookies.set('age', '12', { expires: 7 })
        console.log(Cookies.get('age'));
</script>

<script>
        Cookies.set('gender', 'male', { expires: 7 })
        console.log(Cookies.get('gender'));
</script>

 浏览器Cookie存储如下图：

二、HTML5 web存储（webStorage）

   1、sessionStorage存储

会话存储，它的特点如下：

    1、页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。

    2、打开多个相同的URL的Tabs页面，会创建各自的sessionStorage。

   3、 关闭对应浏览器tab，会清除对应的sessionStorage。

    sessionStorage方法：

// 设置内容
sessionStorage.setItem('name','terry');

// 获取内容
sessionStorage.getItem('name');

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

// 删除单个数据
sessionStorage.removeItem('name');

//获取数据长度
sessionStorage.length;

//得到某个索引的key
sessionStorage.key(index);

eg：创建3个数据

<script> 
var str = "tom";
sessionStorage.setItem("str1", str);
var str = "terry";
sessionStorage.setItem("str2", str);
var str = "mark";
sessionStorage.setItem("str3", str);
</script>

浏览器sessionStorage存储如下图：

    2、localStorage存储

     本地存储，存到本地磁盘中，即使浏览器关闭数据依然在。

      localStorage、sessionStorage的方法相同。

// 设置内容
localStorage.setItem('name','terry');

// 获取内容
localStorage.getItem('name');

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

// 删除单个数据
localStorage.removeItem('name');

//获取数据长度
localStorage.length;

//得到某个索引的key
localStorage.key(index);