zoukankan      html  css  js  c++  java
  • 夺命雷公狗—angularjs—16—angularjs里面的缓存

    强大的angularjs也给我们预留了一套他的缓存机智,这样在某个程度上来说还是可以做到减轻一点服务器压力的。。。。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="css/amazeui.min.css">
        <script src="js/jq2.js"></script>
        <script src="js/amazeui.min.js"></script>
        <script src="js/angular.min.js"></script>
    </head>
    <body ng-app="myapp">
        <div class="am-g" style="500px;" ng-controller="app">
            <div class=" col-md-8 col-sm-centered">
                <form class="am-form">
                    <fieldset class="am-form-set">
                        <input type="text" placeholder="请输入要缓存的内容" ng-model="tdesc">
                    </fieldset>
                    <button type="submit" class="am-btn am-btn-primary am-btn-block" ng-click="instcache()">设置缓存</button>
                    <button type="submit" class="am-btn am-btn-secondary am-btn-block" ng-click="selcache()">查看缓存</button>
                    <button type="submit" class="am-btn am-btn-danger am-btn-block" ng-click="delcache()">删除缓存</button>
                </form>
                <p>{{cachemess}}</p>
            </div>
        </div>
    </body>
    <script>
        var app = angular.module('myapp',[]);
        app.service('cache',function($cacheFactory){
            return $cacheFactory('test');//这里的test是随便取的,就有点类似json里面的第一个数据的名字一样
        });
        app.controller('app',function($scope,cache){
            //添加缓存
            $scope.instcache = function(){
                cache.put('lists',$scope.tdesc);
            }
            //查找缓存
            $scope.selcache = function(){
                $scope.cachemess = cache.get('lists');
            }
            //删除缓存
            $scope.delcache = function(){
                cache.remove('lists'); //这里是直接删除的
                $scope.cachemess = cache.get('lists');//加上这句之后他就可以点击删除缓存后直接看到下面的最新缓存
                //cache.removeAll(); //删除所有的
                //cache.destroy();//破坏的
            }
        });
    </script>
    </html>

    效果如下所示:

  • 相关阅读:
    spring boot所有配置
    Hibernate validator的一些额外特性
    相似序列搜索
    时间序列异常检测
    基于结构的距离度量
    jupyterlab的启动404error问题
    爬虫-Chrome-问题1
    厘清重要概念的内涵与外延
    六)定时任务持久化
    公钥私钥
  • 原文地址:https://www.cnblogs.com/leigood/p/5789736.html
Copyright © 2011-2022 走看看