js清空本地存储_浅谈web本地存储

这里仅谈一谈常见的并且我实际用过的localStorage、sessionStorage，cookie也很常用但目前我在实际项目中没有在前端直接对其进行操作过，此处就略过。

Web Storage API 支持的两种本地存储机制分别是上述的 localStorage 和 sessionStorage。

既然同为本地存储的两种机制，自然既有相同又有不同之处。

相同点（存储内容，存储操作）：

1、都只能以字符串形式存储简单的健值对信息，如果要对Object类型数据进行存储则可以使用json；

2、分别都有四种对存储内容的操作方式包括：setItem('key', 'value'), getItem('key'), remove('key'), clear()，如字面意思，setItem进行了健值对的存储操作，一次仅能存储一条记录，getItem、removeItem 则是通过指定的key来获取存储的value和删除指定的记录，clear则是清空整个storage对象里的存储内容。

这两点都很好理解也很好上手操作

不同点（存储机制）：

1、对于localStorage来说，存储的内容是同源（域名、端口、协议都相同的页面）页面共享的，而sessionStorage则是不同标签页或者不同窗口分别独自维护本页面存储的信息；

2、localStorage存储的内容只能通过手动操作去改变，在页面进行刷新或者关闭窗口的操作都不会对存储的数据造成任何影响，sessionStorage则是在页面关闭之后会清除当前页面所存储的信息。

很多时候自以为的看懂并不是真正的理解了，或者没有经过实际的应用和操作，至少我自己是不敢说是真正的搞懂。

关于localStorage和sessionStorage的区别，简单说就是页面的关闭是否会清除存储数据，深入一些思考的话，就会发现，对于localStorage存储的内容是同源页面共享的，有点像JS中的引用数据类型，所以各个页面进行的操作都会影响到其他页面，而sessionStorage，关闭页面会清除存储数据，每个页面独自维护自己的session，各个页面之间的存储数据不会互相影响，不过值得注意的一点是，从当前页面的超链接打开同源的一个新标签页时，会带走当前的sessionStorage存储内容，相当于复制了一份带走，因为在新标签页对本页面的存储内容进行改动时不会影响到源页面的数据。我想这才是两种存储方式之间真正的区别。

实际测试这种情况的时候，发现了有一点点区别，从页面通过超链接跳转到新的同源页面，会复制一份当前的sessionStorage，而通过鼠标右键在新标签页中打开当前链接则不会复制当前的sessionStorage。

在实际使用中，发现博客园新建随笔或者博客中的自动保存内容的功能，其实就是将输入内容保存到当前页面localStorage中，而知乎似乎不是这么用的。

最后关于两种存储方式的存储容量，大部分浏览器都是5M，具体可以通过以下链接进行测试

Web Storage Support Test​dev-test.nemikor.com

测试的原理当然就是，通过不断向storage中写入数据来实现，chrome的存储容量大约是5M，不同浏览器可能会有差异，当存储容量接近浏览器本地存储极限时，进行存取操作可能会很缓慢有时甚至会导致浏览器崩溃，因此不宜存储数据量过大的内容。