转载——HTML5 Web存储

一、概述

在客户端存储数据

HTML5提供了两种在客户端存储数据的新方法：

localStorage--没有时间限制的数据存储；
sessionStorage--针对一个session的数据存储。当用户关闭游览器窗口后，数据会被删除。

cookie：每条的存储空间为4K；

localStorage：一般游览器支持的是5M大小，不同的游览器有所不同。

localStorage与sessionStorage的唯一一点区别就是，localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空。

之前，这些都是由cookie完成的。但是cookie不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得cookie速度很慢而且效率也不高。

在HTML5中，数据不是由每个服务器请求传递的，而且只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。

HTML5使用JavaScript来存储和访问数据。

二、localStorage优缺点

优点

1、扩展了cookie的限制；

2、可以将此请求的数据存储在本地，相当于一个5M的本地数据库。

缺点

1、游览器存储的大小不统一，IE8以上版本才支持；

2、值类型被限定为string类型；

3、在游览器的隐私模式下面是不可读取的；

4、本质上对字符串的读取，如果存储内容多的话，会消耗内存空间，会导致页面变卡。

localStorage的游览器支持情况：

三、举例使用

（1）localStorage方法

使用localStorage方法对用户访问页面的次数进行计数：

<script type="text/javascript">
if (localStorage.pagecount)
  {
  localStorage.pagecount=Number(localStorage.pagecount);
  }
else
  {
  localStorage.pagecount=1;
  }
  document.write("Visits" + localStorage.pagecount + "time(s).");
</script>

（2）session方法

对用户在当前session中访问页面的次数进行计数：

<script type="text/javascript">
if (sessionStorage.pagecount)
   {
    sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
   }
else
   {
   sessionStorage.pagecount=1;
   }
document.write("Visits" +sessionStorage.pagecount+"time(s) this session.");
</script>

（3）localStorage之【增、删、改、查】

1、【增】添加数据。注意：【改】是重新赋值和增的用法一致

参数：格式为key=value形式。数据类型为：字符串，也可用变量。

2、【查】读取数据

3、【改】

4、【删】

5、【判断】

6、转换成字符串

7、将JSON存储到localStorage里

使用场景：后台传递json格式的经纬度给前台，前台让它在地图上渲染出来，而且是两个不同的js文件传递，然后就使用了这个方法。

简单说是跨js传递json值，通过localStorage中转，有种压缩和解压缩的味道在。

四、localStorage中的json和json字符串转换

①存储json数据

将json数据存储到本地，先使用JSON.stringify()将json对象转换成字符串，然后在存储到localStorage中。

<script>
if (window.localStorage){
   let storge = window.localStorage;
   storge.clear();

   let jsonData = {
      'name':'xiaoming',
      'age':'18',
      'sex':'male'
  };
  let jsonString = JSON.stringify(jsonData);
  storge.setItem('data',jsonString);
} else {
  console.log('游览器不支持localStorage!');
}
</script>

②读取json数据

<script>
    if (window.localStorage) {
        let storge = window.localStorage;
        console.log(storage.getItem('data'));
        console.log(typeof storge.getItem('data'));
} else {
        console.log('游览器不支持localStorage!');
}
</script>

获取到json字符串，将json字符串，转换为对象

<script>
    if(window.localStorage){
       let storge = window.localStorage;
       let json = storge.getItem('data');

       let data = JSON.parse(json);

       console.log(data);
} else {
       console.log('游览器不支持localStorage!');
}
</script>

参考博客：html5的localStorage之【增、删、改、查】https://blog.csdn.net/qq_33862644/article/details/78689577

html5 web存储API localStorage https://blog.csdn.net/ithanmang/article/details/82116143