JavaScript WebStorage(localStorage SessionStorage)

LocalStorage 和 SessionStorage 统称为 WebStorage

1、LocalStorage

1.1、LocalStorage 简介

在 HTML5 中，新加入了一个 LocalStorage 特性，这个特性主要是用来作为本地存储来使用的，解决了 cookie 存储空间不足的问题(cookie中每条cookie的存储空间为4k)，LocalStorage 中一般浏览器支持的是 5M 大小，这个在不同的浏览器中 LocalStorage 会有所不同。

1.2、LocalStorage 的优势与局限

优势

LocalStorage 拓展了 cookie 的 4K 限制。LocalStorage 的大小一般为 5MB，可以储存更多的信息
LocalStorage 是持久储存，并不会随着页面的关闭而消失，除非主动清理，不然会永久存在
仅储存在本地，不像Cookie那样每次HTTP请求都会被携带

局限

浏览器的大小不统一，并且在 IE8 以上的IE版本才支持 LocalStorage 这个属性
目前所有的浏览器中都会把 LocalStorage 的值类型限定为 string 类型，这个在对我们日常比较常见的 JSON 对象类型需要一些转换
LocalStorage 在浏览器的隐私模式下面是不可读取的
LocalStorage 本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
LocalStorage 不能被爬虫抓取到
LocalStorage 受到同源策略的限制，即端口、协议、主机地址有任何一个不相同，都不会访问

1.3、LocalStorage 使用

LocalStorage 是 html5 的新特性，所以并不是所有的浏览器都支持，因此在使用 LocalStorage 时需要先判断浏览器是否支持localStorage。

下面这段代码就是用来判断浏览器是否支持localStorage

<script>
  if (window.localStorage) {
    alert("浏览器支持localStorage")
  } else {
    alert("浏览器不支持localStrorage")
  }
</script>

LocalStorage 存数据和取数据

<script>
  if (window.localStorage) {
    var storage=window.localStorage;
    //第一种存值方式
    storage.a="我是a";
    //第二种存值方式
    storage['b']=100;
    //第三种存值方式，官方推荐
    storage.setItem('c',"我是c");

    //第一种取值方式
    var one=storage.a;
    alert("第一种取值："+one);

    //第二种取值方式
    var two=storage['b'];
    alert("第二种取值："+two);

    //第三种取值方式，官方推荐
    var three=storage.getItem('c');
    alert("第三种取值："+three);
    
    // 遍历取值
    for(var i=0;i<storage.length;i++){
      var key=storage.key(i);
      alert(key);
    }
    
  } else {
    alert("浏览器不支持localStrorage")
  }
</script>

修改、删除、清空

<script>
  if (window.localStorage) {
    var storage=window.localStorage;
    storage.setItem('a',"我是a");
    var before=storage.getItem('a');
    alert("修改前的a："+before);

    storage.setItem('a',"a被修改了");
    var after=storage.getItem('a');
    alert("修改之后的a："+after);
    
    storage.removeItem('a');
    alert("删除后的a："+storage.getItem('a'));

    storage.clear(); //清空localStorage
    alert("删除后的a："+storage.getItem('a'));
  } else {
    alert("浏览器不支持localStrorage");
  }
</script>

方法	描述
`setItem()`	将数据存储在 LocalStorage 中。
`getItem()`	从 LocalStorage 获取或检索数据
`removeItem()`	使用密钥从 LocalStorage 中删除数据
`key()`	从指定索引处的 LocalStorage 检索数据

1.4、LocalStorage 注意事项

LocalStorage 中存放的是 String 类型的值，如果我们需要将 JSON 格式的数据存放到 LocalStorage 中，需要使用 JSON.stringify() 将 JSON 转换成为字符串；使用 JSON.parse() 方法将字符串转换成为JSON对象

1.5、LocalStorage 的使用场景

有些网站有换肤的功能，这时候就可以将换肤的信息存储在本地的 LocalStorage 中，当需要换肤的时候，直接操作 LocalStorage 即可
在网站中的用户浏览信息也会存储在 LocalStorage 中，还有网站的一些不常变动的个人信息等也可以存储在本地的 LocalStorage 中

2、SessionStorage

SessionStorage 和 LocalStorage 都是在 HTML5 才提出来的存储方案，SessionStorage 主要用于临时保存同一窗口(或标签页)的数据，刷新页面时不会删除，关闭窗口或标签页之后将会删除这些数据。

2.1、SessionStorage 与 LocalStorage 对比

SessionStorage 和 LocalStorage 都在本地进行数据存储；
SessionStorage 也有同源策略的限制，但是 SessionStorage 有一条更加严格的限制，SessionStorage 只有在同一浏览器的同一窗口下才能够共享；
SessionStorage 和 LocalStorage 都不能被爬虫爬取；

2.2、SessionStorage 的常用API

// 保存数据到 sessionStorage
sessionStorage.setItem('key', 'value');

// 从 sessionStorage 获取数据
let data = sessionStorage.getItem('key');

// 从 sessionStorage 删除保存的数据
sessionStorage.removeItem('key');

// 从 sessionStorage 删除所有保存的数据
sessionStorage.clear();

// 获取某个索引的Key
sessionStorage.key(index)

示例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>sessionStorage</title>
  </head>
  <body>
    <h2>sessionStorage</h2>
    <button onclick="saveData()">点我保存一个数据</button>
    <button onclick="readData()">点我读取一个数据</button>
    <button onclick="deleteData()">点我删除一个数据</button>
    <button onclick="deleteAllData()">点我清空一个数据</button>

    <script type="text/javascript" >
      let p = {name:'张三',age:18};

      function saveData(){
        sessionStorage.setItem('msg','hello!!!');
        sessionStorage.setItem('msg2',666);
        // 转换成JSON 字符串存进去
        sessionStorage.setItem('person',JSON.stringify(p))
      }
      function readData(){
        console.log(sessionStorage.getItem('msg'));
        console.log(sessionStorage.getItem('msg2'));

        const result = sessionStorage.getItem('person');
        console.log(JSON.parse(result))

        // console.log(sessionStorage.getItem('msg3'))
      }
      function deleteData(){
        sessionStorage.removeItem('msg2')
      }
      function deleteAllData(){
        sessionStorage.clear()
      }
    </script>
  </body>
</html>

2.3、SessionStorage的使用场景

由于 SessionStorage 具有时效性，所以可以用来存储一些网站的游客登录的信息，还有临时的浏览记录的信息。当关闭网站之后，这些信息也就随之消除了。

3、总结

存储内容大小一般支持 5MB 左右（不同浏览器可能还不一样）

浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制