强大的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. ImageX用来做Windows OEM部署

    https://technet.microsoft.com/en-us/library/cc722145(v=ws.10).aspx http://download.csdn.net/user/phc ...

  2. 再谈CocoaPods

    1. 简介 java语言的第三方库管理工具是Maven,Node.js的第三方库管理工具是npm,而ios的第三方库管理工具是CocoaPods. CocoaPods 的原理是将所有的依赖库都放到名为 ...

  3. iOS面试题01

    1.#import和#include.@class有什么区别?#import<>和#import“”又有什么区别? 答:1.#import和#include都能完整地包含某个文件的内容,# ...

  4. js方法参数默认值设置

    这里的默认值设置 很容易以为和php相似 function(v1,v2="test") { alert(v2); } 但这样是不对的,js方法,如需传参,甚至可以不用预定义(也就是 ...

  5. php中的编码问题

    转自:http://www.jb51.net/article/22501.htm php的header来定义一个php页面为utf编码或GBK编码 php页面为utf编码 header("C ...

  6. 二级c程序设计题（2）

    原文:http://www.cnblogs.com/imaker/p/6128049.html 所属年份:2010.9;2012.3编写函数fun,其功能是:根据以下公式求π的值(要求精度0.0005 ...

  7. cat 命令（转）

    cat命令的用途是连接文件或标准输入并打印.这个命令常用来显示文件内容,或者将几个文件连接起来显示,或者从标准输入读取内容并显示,它常与重定向符号配合使用. 1．命令格式: cat [选项] [文件] ...

  8. Spring第12篇—— Spring对Hibernate的SessionFactory的集成功能

    由于Spring和Hibernate处于不同的层次,Spring关心的是业务逻辑之间的组合关系,Spring提供了对他们的强大的管理能力, 而Hibernate完成了OR的映射,使开发人员不用再去关心 ...

  9. Linux 技巧：让进程在后台可靠运行的几种方法

    我们经常会碰到这样的问题,用 telnet/ssh 登录了远程的 Linux 服务器,运行了一些耗时较长的任务, 结果却由于网络的不稳定导致任务中途失败.如何让命令提交后不受本地关闭终端窗口/网络断开 ...

  10. android AlarmManager 详解

    在开发互联网应用时候,我们常常要使用心跳来保证客户端与服务器的连接.怎么完成心跳很关键,在说道客户端心跳功能时,如果使用Timer或者专门开起一个线程来做心跳的工作,会浪费CPU工作时间,而且也会更多 ...