浏览器本地存储，localStorage

时间：2022-08-26 08:39:28

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

　　这里记录下操作的相关 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 串，再进行存储，因为对象或数组，它有字节限制，超出后的部分会被丢弃，所以转成 json 完全无问题，获取的时候还需要反转成对象或数组哦别忘了！

　　还有个清除所有存储的 api ：localStorage.clear();

　　会全部清除哦，谨慎使用~

标签：

相关文章