摘要：基本方法添加键值对，如果存在时，更新。清除所有键值对。也就是说，只要用户不主动删除，存储的数据将会永久存在。在使用进行存取操作的同时，如果需要对存取操作进行监听，可以使用内置的事件监听器对数据进行监控。
1.localStorage 基本方法
添加键值对：localStorage.setItem(key,value)，如果key存在时，更新value。
获取键值：localStorage.getItem(key)，如果key不存在返回null。
删除键值对：localStorage.removeItem(key)。key对应的数据将会全部删除。
清除所有键值对：localStorage.clear()。如果调用clear()方法，清空localStorage中所有信息，那么key、oldValue和newValue都会被设置为null。
获取localStorage的属性名称（键名称）：localStorage.key(index)。
还有一个和普通对象不一样的属性length:
获取localStorage中保存的键值对的数量：localStorage.length。
2.存储格式localStorage对象的键和值只能是字符串，假设我们要保存一个对象到localStorage中，可以使用拼接的方式。当然也可以借助JSON类，将对象转换成字符串保存，然后在取出来的时候将json字符串转换成真正可用的json对象格式
3.生命周期在数据存储的时效性上，localStorage并不会像cookie那样可以设置数据存活的时限。也就是说，只要用户不主动删除，localStorage存储的数据将会永久存在。
sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。
4.存储位置不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。
5.存储大小对于HTML5的localStorage而言，其大小支持为5M（当然，各浏览器的大小差异还是有的）。对于IE的userData，用户数据的每个域最大为64KB。
6.应用场景建议不要使用localStorage方式存储敏感信息，哪怕这些信息进行过加密。另外，对身份验证数据使用localStorage进行存储还不太成熟。我们知道，通常可以通过xss漏洞来获取到Cookie，然后用这个Cookie进行身份验证登录，但是浏览器可以通过HttpOnly来保护Cookie不被XSS攻击获取到。而localStorage存储没有对XSS攻击有任何防御机制，一旦出现XSS漏洞，那么存储在localStorage里的数据就极易被获取到。
7.storage事件当存储的storage数据发生变化时都会触发它，但是它不同于click类的事件会冒泡和能取消，storage改变的时候，触发这个事件会调用所有同域下其他窗口的storage事件，不过它本身触发storage即当前窗口是不会触发这个事件的（当然ie这个特例除外，它包含自己本事也会触发storage事件）。
在使用 Storage 进行存取操作的同时，如果需要对存取操作进行监听，可以使用 HTML5 Web Storage api 内置的事件监听器对数据进行监控。只要 Storage 存储的数据有任何变动，Storage 监听器都能捕获。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/107647.html
摘要：本地存储的方案传统把信息存储到客户端的浏览器中但是项目服务器端也是可以获取的把信息存储到服务器上的服务器存储永久存储在客服端的本地。 在客户端运行的js是不能操作用户电脑磁盘中的文件的（这是为了保护客户端运行的安全）。 1、js中的本地存储： 使用js向浏览器的某一个位置中存储一些内容，浏览器即使关闭了，存储的信息也不会销毁，当在重新打开浏览器的时候我们依然可以获取到上一次存储的信息。...
摘要：通常，它用于告知服务端两个请求是否来自同一浏览器，如保持用户的登录状态。使基于无状态的协议记录稳定的状态信息成为了可能。标记为的只应通过被协议加密过的请求发送给服务端。 前记 前面我已经写了一篇关于Cookie的文章，但是那时候我其实理解的并不是很深刻，会有些搞不懂的地方，今天我就再写一次，博客也是我的学习笔记 Cookie Cookie是服务器发送到用户浏览器并保存在本地的一小块数据...
摘要：移动端缓存失效是我印象最深的一个之一，为啥呢，因为这个问题导致我加班到很晚。的生命周期是仅在当前会话下有效。引入了一个浏览器窗口的概念，是在同源的窗口中始终存在的数据。无bug，不程序：作为程序员的我，不是修bug就是在写bug的路上。 移动端sessionStorage缓存失效是我印象最深的一个bug之一，为啥呢，因为这个问题导致我加班到很晚。在现在看来就是一个简单的概念问题。在我刚工作...
摘要：定时器时间到了就将中存的信息以及存的时间信息就是那个对象中的删掉就行了。难道存了三条我就做三个定时器存的条我就做个定时器这也太了而且也并不符合实际。 一、酷酷的开头 在潜水的时间长达一年之后，我终于鼓起勇气开始写我的第一篇文章了。前端小菜，只是想记录一下自己的想法，望各位看到这文的大佬轻喷。 在现在前后端分离的开发模式下，存储信息一般都不在使用以往使用的cookie了，就拿笔主我之前做...
摘要：已经超出本地存储限定大小可进行超出限定大小之后的操作，如下面可以先清除记录，再次保存面试官一波素质三连对于只是会使用的同学来说，肯定是不得其解的。 最近面试的时候关于html5API总会被问到localStorage的问题， 对于一般的问题很简单，无非就是 localStorage、sessionStorage和cookie这三个客户端缓存的区别 localStorage的API，g...
阅读 2892·2021-11-25 09:43
阅读 3593·2021-08-31 09:41
阅读 1197·2019-08-30 15:56
阅读 2072·2019-08-30 15:55
阅读 2895·2019-08-30 13:48
阅读 2781·2019-08-29 15:15
阅读 916·2019-08-29 15:14
阅读 2615·2019-08-28 18:26
