浏览器本地存储，localStorage

时间 2019-11-12

原文原文链接

　　通常不会用到这个浏览器的本地存储，项目中的数据通常都会存在后台的数据库中，须要时，则由前台进行请求获取。不过有些状况下不得不使用这个 localStorage 来作保存操做。好比绘制的图像数据，请求后台返回数据进行绘制，这时须要将以前请求的绘制图片数据进行保留，以便方便对比，而将以前请求绘制的图片数据放入数据库中保存很不方便，并且频繁切换或者数据量大时，会形成性能问题，这样是不合要求的，那怎么解决此类问题呢？想到了利用浏览器本地存储的方式，只要不清除历史记录，本地历史会一直保存，这样就会很方便的经过 api 来获取想要的数据，大大简化了与后台数据请求的此数，减小了其工做量等。html

　　这里记录下操做的相关 api，经常使用的几个异常简单，能够把浏览器存储当成是一个巨大的对象来使用，不过由浏览器要求，记着是 IE9 以上，其余浏览器貌似都是支持的。数据库

<!DOCTYPE html>
<html >
    <head>
        <meta charset='utf-8'>
    </head>
    <body >
        <script language="JavaScript">
        　　 console.log(localStorage.a)
            if(window.localStorage){
                alert(1)
                localStorage.a = 3
                var b = localStorage.a
                console.log(b);
            }else{
                alert(0)
            }
            console.log(localStorage.localObj);
            var obj = {name: 'ice'}
            localStorage.localObj = JSON.stringify(obj);
            console.log(localStorage.localObj);

            localStorage.clear();
        
            console.log(localStorage.localObj);
        </script>
    </body>
</html>

　　首先须要判断存不存在本地存储，再使用。json

　　而后就是相似对象的调用同样，直接存储使用便可。api

　　有的时候数据不少，建议先将数据转成 json 串，再进行存储，由于对象或数组，它有字节限制，超出后的部分会被丢弃，因此转成 json 彻底无问题，获取的时候还须要反转成对象或数组哦别忘了！数组

　　还有个清除全部存储的 api ：localStorage.clear();浏览器

　　会所有清除哦，谨慎使用~性能