强大的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="width: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>

效果如下所示：

夺命雷公狗—angularjs—16—angularjs里面的缓存的更多相关文章

  1. 夺命雷公狗-----React---12--添加类和样式

    <!DOCTYPE> <html> <head> <meta charset="utf-8"> <title></ ...

  2. 夺命雷公狗-----React---11--添加css样式的方法

    <!DOCTYPE> <html> <head> <meta charset="utf-8"> <title></ ...

  3. 夺命雷公狗—angularjs—6—单条数据的遍历

    我们在实际的工作中常常会处理到一些数据的遍历,这些数据都是后端传到前端的,有些公司会让前端帮忙处理一点遍历的工作,废话不多说,直接上代: <!doctype html> <html ...

  4. 夺命雷公狗-----React---10--组建嵌套进行数据遍历

    先写一个组建... 然后进行嵌套.. <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  5. 夺命雷公狗-----React---9--map数据的遍历

    比如我们要实现的是这种效果: 用这种方法来写,她只能写死在哪,没啥意思,所以我们定义一个数据,然后来测试下map方法对她遍历出来的数据 <!DOCTYPE html> <html l ...

  6. 夺命雷公狗-----React---8--react官方提供的组建实现双向绑定

    首先要引入她.. <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  7. 夺命雷公狗-----React---7--组建的状态props和state

    props:组建初始要渲染的数据,他是不可以改变的 state:组建状态发生改变,调用render重新渲染数据 我们来写一个例子: <!DOCTYPE html> <html lan ...

  8. 夺命雷公狗-----React---6--props多属性的传递

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 夺命雷公狗-----React---5--props对象的传递

    提示:props的值是不可以改变的... <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  10. 夺命雷公狗-----React---4--props变量的传递

    提示:props的值是不可以改变的... <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

随机推荐

  1. Win7下VS2008编译QtiPlot

    Win7下VS2008编译QtiPlot By wangsh 2011-11-25 QtiPlot 是一款开源免费的科学绘图软件,可运行在多个平台(windows.Linux等)中,从功能上讲,Qti ...

  2. php--yii框架中的ajax分页与yii框架自带的分页

    要想使用Yii分页类 第一步:在控制器层加载分页类 use yii\data\Pagination; 第二步: 使用model层查询数据,并用分分页,限制每页的显示条数 $data = Zhao::f ...

  3. [ASP.NET] Dictionary 和 Hashtable 区别

    Dictionary和Hashtable 是两个比较常用的表示键/值的集合,两者在实际使用过程中有何区别呢? 具体区别如下: 1. Hashtable不支持泛型,而Dictionary支持泛型. 2. ...

  4. Linux GDB调试全面解析

    GDB是GNU开源组织发布的一个强大的UNIX下的程序调试工具,GDB主要可帮助工程师完成下面4个方面的功能: 启动程序,可以按照工程师自定义的要求随心所欲的运行程序. 让被调试的程序在工程师指定的断 ...

  5. eclipse根据.wsdl文件自动生成webservice的调用客户端

    1.工具:eclipse3.3或者是带有webservice插件的eclipse 2. 首先用浏览器访问webservice的站点,接着保存打开的页面,后缀为.wsdl. 3.把保存好的文件拷入ecl ...

  6. .net framework环境

    microsoft.com/downloads/details.aspx?FamilyId=262D25E3-F589-4842-8157-034D1E7CF3A3&displaylang=z ...

  7. Linux Bash Shell 快速入门

    BASH 的基本语法 最简单的例子 —— Hello World! 关于输入.输出和错误输出 BASH 中对变量的规定(与 C 语言的异同) BASH 中的基本流程控制语法 函数的使用 2.1     ...

  8. linux查看防火墙状态及开启关闭命令（转）

    存在以下两种方式: 一.service方式 查看防火墙状态: [root@centos6 ~]# service iptables status iptables:未运行防火墙. 开启防火墙: [ro ...

  9. Linux就这个范儿 第15章 七种武器 linux 同步IO: sync、fsync与fdatasync Linux中的内存大页面huge page/large page David Cutler Linux读写内存数据的三种方式

    Linux就这个范儿 第15章 七种武器  linux 同步IO: sync.fsync与fdatasync   Linux中的内存大页面huge page/large page  David Cut ...

  10. Activity的四种启动模式和onNewIntent()

    转自:http://blog.csdn.net/linghu_java/article/details/17266603 Android中Activity启动模式详解   在Android中每个界面都 ...