localStorage本地持久化存储API

时间: 2019-07-13阅读: 22标签: 存储

localStorage基本知识点

localStorage, 是一个用来做本地持久化存储的Web Api。 localStorage以键值对的形式存储数据。用法很简单:

// 设置
localStorage.setItem('myCat', 'Tom');

// 获取
let cat = localStorage.getItem('myCat');

// 移除
localStorage.removeItem('myCat');

// 移除所有
localStorage.clear();

有几个点需要注意:

1、localStorage是以『源(origin)』为维度进行存储的。也就是说,跨域访问其他站点的localStorage是行不通的。
2、localStorage是以字符串的形式保存数据的。
3、对于每一个域,localStorage最多允许存储几M数量级的数据(具体数字因浏览器而异)。

localStorage可以用来做什么:

存储登录token,用户信息等数据;本地持久化保存业务数据;保存代码,以提高网站性能。等等等等…还有本文所要介绍的页面同步。


监听LocalStorage变化

localStorage被改变时(从无到有,从有到无,值改变),会触发一个storage事件。我们可以在window上监听到这个事件。

window.addEventListener('storage', () => {
  ...
});

window.onstorage = () => {
  ...
};

这里需要注意的是,在改变localStorage的当前页面,是无法监听到storage事件的。如果我同时打开了多个同源的页面: A页面、B页面、C页面,当在A页面中修改localstorage时,B页面和C页面中都可以监听到storage事件,而A页面是不会触发storage事件的。

一个storage事件的实例如下:

clipboard.png

其中比较关键的是key,newValue,oldValue这几个值。key表示的是被改变的localStorage的key值,newValue是改变后最新的值,oldValue是旧的值。


实现两个页面同步的效果

了解了上面的知识点,就可以解释本文开头所提到的网页是如何实现多页面同步的了。来实现一个简单的。

<html>
<head>
    <style>
        .count {
            font-size: 20px;
            color: red;
        }
    </style>
</head>
<body>
    <div class="count">0</div>
    <button>click</button>
    <script>
        window.onload = function () {
          
            var btnEl = document.querySelector('button');
            var countEl = document.querySelector('.count');

            btnEl.addEventListener('click', function () {
                var curCount = Number(localStorage.getItem('count'));
                var newCount = curCount + 1;
                countEl.innerHTML = newCount;
                localStorage.setItem('count', newCount);
            });

            window.addEventListener('storage', function (e) {
                var newValue = e.newValue;
                countEl.innerHTML = newValue;
            });
        }
    </script>
</body>

</html>


写在后面

在平时的业务开发中,localStorage使用的频率也不低,但确实是不知道还可以这么用。以后有遇到页面同步的需求时,localStorage也可以作为一个选项了。符合预期。


链接: http://www.fly63.com/article/detial/4664

js中cookie操作总结:cookie设置,读取,删除,判断是否存在

有时也用其复数形式 Cookies,指某些网站为了辨别用户身份,JavaScript对cookie的相关操作,设置cookie,读取cookie,删除cookie,判断cookie是否存在.......

HTTP缓存和浏览器的本地存储

http请求做为影响前端性能极为重要的一环,因为请求受网络影响很大,如果网络很慢的情况下,页面很可能会空白很久。对于首次进入网站的用户可能要通过优化接口性能和接口数量来解决。但是,对于重复进入页面的用户,除了浏览器缓存

ES6封装H5本地存储localStorage、sessionStorage

localStorage: 方法存储的数据没有时间限制。sessionStorage: 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。

本地数据存储解决方案以及cookie的坑

cookie过长导致页面打开失败;在公司的项目中有一个需求是打开多个工单即在同一个页面中打开了多个tab(iframe),但是需要在刷新时只刷新当前页面仍然保留着多个iframe,现在刷新有两种方式

Cookie、Session与Token

Cookie是一个http请求首部,当服务端响应头上标记着setCookie时,可以设置此cookie到当前域名下;session实际上是一种概念,表示每次会话服务器存储的用户信息

Web 存储技术

第一个Web存储的技术叫做Cookie,它是网站的身份证。是网站为了辨别用户身份,进行session(服务端的session)跟踪而存储在用户本地终端上的数据,也就是说它是存在电脑硬盘上的,一个很小的txt类型的文件

HTML5中的storage 如何使用

HTML5中,我们常常用到storage,那这个storage到底是什么?有啥用呢?其实,storage是个很简单的东西,只要熟悉JavaScript中对象的童鞋,看完小编本文的分享

localStorage设置过期时间

我们都知道localStorage不主动删除,永远不会销毁,那么如何设置localStorage的过期时间呢?使用场景: 1.利用本地数据,减少网络传输 ,2.弱网络环境下,高延迟,低带宽,尽量把数据本地化

在前后端分离的项目中,ajax跨域请求怎样附带cookie

后台保存用户信息通常使用的session和cookie结合的方法,而在前端的实际情况中,跨域产生的ajax是无法携带cookie信息的,这样导致了session和cookie的用户信息储存模式受到影响,该怎样去解决这样一个问题呢

Cookie防篡改机制_cookie怎么防止被篡改/伪造

因为Cookie是存储在客户端,用户可以随意修改。所以存在一定的安全隐患,服务器为每个Cookie项生成签名。如果用户篡改Cookie,则与签名无法对应上。以此,来判断数据是否被篡改。

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全