https://amatsuzero.github.io/LastStand/tags/web-storage/Recent content in Web Storage on Last StandHugozh-cnWed, 06 Nov 2024 00:00:00 +0800https://amatsuzero.github.io/LastStand/posts/frontend/html/web-storage/Wed, 09 Oct 2024 00:00:00 +0800https://amatsuzero.github.io/LastStand/posts/frontend/html/web-storage/<h2 id="一-简介">一、 简介</h2> <p>浏览器本地存储是指浏览器提供的一种机制，允许 Web 应用程序在浏览器端存储数据，以便在用户下次访问时可以快速获取和使用这些数据。一共两种存储方式：localStorage 和 sessionStorage。下面介绍下两种缓存的特性和在内部平台的一些应用。</p> <h2 id="二localstorage-和-sessionstorage">二、localStorage 和 sessionStorage</h2> <h3 id="21区别">2.1、区别</h3> <p>localStorage 和 sessionStorage 的主要区别是生命周期，具体区别如下：</p> <table> <thead> <tr> <th></th> <th>localStorage</th> <th>sessionStorage</th> </tr> </thead> <tbody> <tr> <td>生命周期</td> <td>持久化存储：除非自行删除或清除缓存，否则一直存在</td> <td>会话级别的存储：浏览器标签页或窗口关闭</td> </tr> <tr> <td>作用域</td> <td>相同浏览器，同域名，不同标签，不同窗口</td> <td>相同浏览器，同域名，同源窗口</td> </tr> <tr> <td>获取方式</td> <td>window.localStorage</td> <td>window.sessionStorage</td> </tr> <tr> <td>存储容量</td> <td>5M</td> <td>5M</td> </tr> </tbody> </table> <p>容量限制的目的是防止滥用本地存储空间，导致用户浏览器变慢。</p> <h3 id="22浏览器兼容性">2.2、浏览器兼容性</h3> <p>1）现在的浏览器基本上都是支持这两种 Storage 特性的。各浏览器支持版本如下：</p> <table> <thead> <tr> <th></th> <th>Chrome</th> <th>Firefox</th> <th>IE</th> <th>Opera</th> <th>Safari</th> <th>Android</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> </thead> <tbody> <tr> <td>localStorage</td> <td>4</td> <td>3.5</td> <td>8</td> <td>10.5</td> <td>4</td> <td>2.1</td> <td>11</td> <td>iOS 3.2</td> </tr> <tr> <td>sessionStorage</td> <td>5</td> <td>2</td> <td>8</td> <td>10.5</td> <td>4</td> <td>2.1</td> <td>11</td> <td>iOS 3.2</td> </tr> </tbody> </table> <p>2）如果使用的是老式浏览器，比如Internet Explorer 6、7 或者其他，就需要在使用前检测浏览器是否支持本地存储或者是否被禁用。以 localStorage 为例：</p>