前端缓存

本文深入探讨了前端缓存技术,包括cookie、localStorage和sessionStorage的特性与使用方法。详细讲解了cookie的大小限制、安全性及过期时间设置,localStorage的大容量存储优势与持久性,以及sessionStorage的会话级别存储特性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.cookie

    cookie的大小被限制在4KB,以键值对的形式保存的,即key=value的格式。cookie可能被禁用。当用户非常注重个人隐私保护时,他很可能禁用浏览器的cookie功能。cookie安全性不够高。所有的cookie都是以纯文本的形式记录于文件中,因此如果要保存用户名密码等信息时,最好事先经过加密处理。

    cookie可以设置过期时间,若没有设置过期时间,则表示这个cookie的生命期为浏览器会话期间,关闭浏览器窗口,cookie就消失。这种生命期为浏览器会话期的cookie被称为会话cookie。会话cookie一般不存储在硬盘上而是保存在内存里,当然这种行为并不是规范规定的。若设置了过期时间,浏览器就会把cookie保存到硬盘上,关闭后再次打开浏览器,这些cookie仍然有效直到超过设定的过期时间。

    手动查看浏览器cookie以及过期时间(浏览器地址栏输入)。谷歌:chrome://settings/siteData 火狐:about:preferences#privacy

注意:

谷歌浏览器chrome本地调试cookie不生效,不管是使用jquery的cookie插件,还是js原生态的cookie方法都不生效。
原因在于chrome不支持js在本地操作cookie。据测试,除了chrome浏览器外,其他主流浏览器(ie、firefox等)都支持js在本地操作cookie。当然部署到服务器上所有浏览器都是支持的。
当然,还有另外一个原因:浏览器设置成不支持cookie。这样,调试js操作cookie当然也是不生效的。
那么,怎么知道当前浏览器不支持或Cookie已被禁用呢?可以使用以下js代码测试:

var dt = new Date(); 
dt.setSeconds(dt.getSeconds() + 60); 
document.cookie = "cookietest=1; expires=" + dt.toGMTString(); 
var cookiesEnabled = document.cookie.indexOf("cookietest=") != -1; 
if(!cookiesEnabled) { 
    //没有启用cookie 
    alert("没有启用cookie ");
} else{
    //已经启用cookie 
    alert("已经启用cookie ");
}

    谷歌浏览器中可以看到cookie的创建时间和到期时间,可以更改本地日期进行测试。F12调试面板也可以看到cookie的信息

cookie小练习

练习内容:在2018年10月1日24点前显示m-tc里面的内容,并设置每次的缓存过期时间为一小时。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>前端缓存</title>
    <style>
    .m-tc{display: none;}
</style>
</head>
<body>
    <div class="m-tc">Hello</div>
    <button class="btnClose">关闭</button>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var endTime = (new Date(2018, 9, 1, 23, 59, 0));
            //检查当前时间
            if (new Date() < endTime) {
                checkcookie();
            }
            //点击关闭时设置缓存名称、缓存内容、过期时间。
            $(".btnClose").on("click", function () {
                setcookie('username', 1, 1)
                $(".m-tc").hide();
            });
 
        })
        
        function setcookie(c_name, value, expiredays) {
            var exdate = new Date();
            exdate.setHours(exdate.getHours() + expiredays);
            document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString())
        }

        function checkcookie() {
            username= getcookie('username');
            if (username != 1) {
                $(".m-tc").show();
            }

        }

        function getcookie(c_name) {
            if (document.cookie.length > 0) {
                c_start = document.cookie.indexOf(c_name + "=")
                if (c_start != -1) {
                    c_start = c_start + c_name.length + 1
                    c_end = document.cookie.indexOf(";", c_start)
                    if (c_end == -1) c_end = document.cookie.length
                        return unescape(document.cookie.substring(c_start, c_end))
                }
            }
            return ""
        }
    </script>
</body>
</html>

2.localStorage

    localStorage解决了cookie存储空间不足的问题。localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同。它的特点就是“持久”,一旦保存,不通过手动清除的话,数据就永远不会过期。第二天、第二周或下一年之后,数据依然可用。它的保存格式是键值对的方式也就是“key-value”的方式保存的。IE8以上的IE版本才支持localStorage这个属性。localStorage的使用是遵循同源策略的,所以不同的网站直接是不能共用相同的localStorage。localStorage只支持string类型的存储。

localStorage写入的三种方式:
    localStorage["a"]=1;
    localStorage.b=1;
    localStorage.setItem("c",3);

localStorage读取的三种方式:
    var a=localStorage["a"];
    var b=localStorage.b;
    var c=localStorage.getItem("c");

localStorage的修改:

   localStorage.b=1;
   console.log(localStorage.b);//1

   localStorage.b=2;
   console.log(localStorage.b);//2

localStorage的删除:
   删除所有:
     localStorage.clear();

   删除某个:
     localStorage.removeItem("a");

获取localStorage的键:
   localStorage.key(0); //a

3.sessionStorage

    sessionStorage是一种会话级别的本地存储,一旦关闭浏览器它就会消失。它的作用域是窗口级别的,不同窗口间的sessionStorage数据不能共享。

属性方法说明
sessionStorage.length获得storage中的个数
sessionStorage.key(n)获得storage中第n个元素对的键值(第一个元素是0)
sessionStorage.getItem(key)获取键值key对应的值
sessionStorage.key获取键值key对应的值
sessionStorage.setItem(key, value)添加数据,键值为key,值为value
sessionStorage.removeItem(key)移除键值为key的数据
sessionStorage.clear()清除所有数据
<think>嗯,用户想了解Angular前端缓存,我得先理清楚Angular中缓存的不同实现方式和应用场景。首先,缓存前端的作用主要是提升性能,减少重复请求,优化用户体验。Angular本身有没有内置的缓存机制呢?或者是不是依赖于第三方库? 首先想到的是HTTP拦截器配合缓存。比如,用HttpClient发送请求,通过拦截器来缓存响应。可能需要用RxJS的shareReplay操作符,这样多个订阅者可以共享同一个结果,避免重复请求。不过要注意缓存有效期,可能需要设置过期时间,否则数据可能过时。 然后是浏览器本身的缓存机制,比如localStorage和sessionStorage。这两种存储方式可以在客户端持久化或会话级存储数据。用户提到的是前端缓存,所以可能需要结合这两种方式,手动存储和读取数据。不过需要考虑数据序列化和反序列化,以及存储空间限制。 Service Worker和Angular的PWA支持也是一个点。通过@angular/pwa可以生成Service Worker,使用缓存策略(如Cache First, Network First)来缓存资源。这可能适用于静态资源和API响应,但配置起来需要了解Service Worker的生命周期和缓存策略。 状态管理库如NgRx或Akita的缓存功能。比如,在NgRx中,可以使用effects来管理数据的获取和缓存,结合selector来获取缓存数据。这适合全局状态管理,但可能需要较多的样板代码。 还有路由缓存,比如用RouteReuseStrategy来缓存组件实例。当用户切换路由时,保留组件状态,避免重新渲染。这对于有复杂表单或数据的页面很有用,但实现起来需要自定义策略,可能比较复杂。 接下来需要考虑用户可能的实际需求。比如,他们是否需要缓存HTTP响应,还是组件状态?或者是静态资源的缓存?不同的场景适用不同的方法。例如,频繁请求的API数据适合HTTP拦截器缓存,而用户偏好设置适合localStorage。 可能还需要提到缓存更新的策略,比如如何判断数据过期,如何触发更新。例如,使用时间戳或版本号来验证缓存有效性,或者在用户执行某些操作时清除缓存。 另外,缓存的风险也要注意,比如数据一致性,内存泄漏问题。比如,过多的缓存数据可能占用内存,需要合理管理缓存的生命周期。 总结起来,Angular前端缓存可以通过多种方式实现,每种方式适用不同场景。需要根据具体需求选择合适的方法,并注意缓存的更新和失效策略,以确保性能和正确性。</think>在Angular中实现前端缓存是提升应用性能的重要手段,以下是分层次的实现方案及原理说明: --- ### 一、HTTP请求缓存(网络层) **实现方式**: ```typescript import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { shareReplay } from 'rxjs/operators'; @Injectable() export class DataService { private cache$: Observable<any>; constructor(private http: HttpClient) {} getData() { if (!this.cache$) { this.cache$ = this.http.get('/api/data').pipe( shareReplay(1) // 缓存最后一次响应 ); } return this.cache$; } clearCache() { this.cache$ = null; } } ``` **特点**: - 使用RxJS的`shareReplay`操作符实现请求复用 - 适合频繁调用的API数据缓存 - 需手动清除缓存(如调用`clearCache()`) --- ### 二、浏览器存储缓存(持久化层) **1. localStorage缓存(长期存储)**: ```typescript // 存储 localStorage.setItem('userSettings', JSON.stringify({ theme: 'dark' })); // 读取 const settings = JSON.parse(localStorage.getItem('userSettings')); // 清除 localStorage.removeItem('userSettings'); ``` **2. sessionStorage缓存(会话级存储)**: ```typescript // 存储(标签页关闭后自动清除) sessionStorage.setItem('tempData', JSON.stringify({ timestamp: Date.now() })); ``` **适用场景**: - 用户偏好设置(localStorage) - 表单草稿保存(sessionStorage) - 最大存储量约5MB(需处理`QuotaExceededError`) --- ### 三、Service Worker缓存(PWA支持) **实现步骤**: 1. 添加PWA支持: ```bash ng add @angular/pwa ``` 2. 配置`ngsw-config.json`: ```json { "assetGroups": [ { "name": "api-cache", "resources": { "urls": ["/api/**"] }, "cacheConfig": { "strategy": "freshness", "maxSize": 100, "maxAge": "1d" } } ] } ``` **缓存策略**: - `freshness`:优先网络请求 - `performance`:优先缓存 - 支持离线访问 --- ### 四、状态管理缓存(全局状态) **NgRx实现示例**: ```typescript // 在effects中缓存数据 loadData$ = createEffect(() => this.actions$.pipe( ofType(loadData), withLatestFrom(this.store.select(hasCachedData)), filter(([_, hasCached]) => !hasCached), mergeMap(() => this.dataService.getData().pipe( map(data => loadDataSuccess({ data })), catchError(error => of(loadDataFailure({ error }))) )) )); ``` **优势**: - 通过Selector实现自动缓存读取 - 支持时间旅行调试 - 适合复杂应用状态管理 --- ### 五、组件级缓存(路由复用) **自定义路由策略**: ```typescript import { RouteReuseStrategy, DetachedRouteHandle } from '@angular/router'; export class CustomReuseStrategy implements RouteReuseStrategy { private storedRoutes = new Map<string, DetachedRouteHandle>(); shouldDetach(route: ActivatedRouteSnapshot): boolean { return route.data.reuse === true; } store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void { this.storedRoutes.set(route.routeConfig.path, handle); } shouldAttach(route: ActivatedRouteSnapshot): boolean { return !!this.storedRoutes.get(route.routeConfig.path); } retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle { return this.storedRoutes.get(route.routeConfig.path); } } ``` **使用场景**: - 保留分页组件状态 - 保持复杂表单数据 - 需要配置路由的`data: { reuse: true }` --- ### 六、缓存更新策略 1. **时间戳验证**: ```typescript const cachedData = localStorage.getItem('cachedData'); const lastUpdate = localStorage.getItem('lastUpdate'); if (Date.now() - Number(lastUpdate) > 3600000) { // 超过1小时则刷新数据 } ``` 2. **版本控制**: ```typescript const CACHE_VERSION = 'v2'; localStorage.setItem('cacheVersion', CACHE_VERSION); ``` 3. **手动清除机制**: ```typescript // 监听用户登出事件 this.authService.onLogout().subscribe(() => { localStorage.clear(); }); ``` --- ### 七、注意事项 1. **敏感数据**:避免在缓存中存储密码等敏感信息 2. **内存管理**:定期清理过期缓存 3. **数据一致性**:缓存失效时需有回退策略 4. **移动端兼容性**:iOS Safari隐私模式下可能禁用localStorage 根据具体场景选择合适的缓存策略组合,通常推荐: - 高频API请求 → HTTP缓存 + Service Worker - 用户偏好 → localStorage + 状态管理 - 复杂页面 → 路由复用策略
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值