浏览器本地存储,localStorage

  一般不会用到这个浏览器的本地存储,项目中的数据一般都会存在后台的数据库中,需要时,则由前台进行请求获取。不过有些情况下不得不使用这个 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();

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

转载于:https://www.cnblogs.com/guofan/p/6773494.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值