强大的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. C++ 安全字符串拼接

    #include <stdio.h> #include <stdint.h> #include <stdarg.h> #if defined(__GNUC__) # ...

  2. C/C++ 中长度为0的数组

    参考文献:http://blog.csdn.net/zhaqiwen/article/details/7904515 近日在看项目中的框架代码时,发现了了一个奇特的语法:长度为0的数组例如 uint8 ...

  3. ArcGIS API for Silverlight代码中使用Template模板

    原文:ArcGIS API for Silverlight代码中使用Template模板 在项目开发中,会遇到点选中聚焦闪烁效果,但是因为在使用Symbol的时候,会设置一定的OffSetX和OffS ...

  4. JQuery事件的链式写法

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  5. iOS 开发进程与线程

    进程(process)是一块包含了某些资源的内存区域.操作系统利用进程把它的工作划分为一些功能单元.进程中所包含的一个或多个执行单元称为线程(thread).进程还拥有一个私有的虚拟地址空间,该空间仅 ...

  6. 使用jQuery为表单添加回车事件

    $(document).keypress(function(e){ if(e.which==13){ checkUserForm(); } });

  7. 概率dp入门

    概率DP主要用于求解期望.概率等题目. 转移方程有时候比较灵活. 一般求概率是正推,求期望是逆推.通过题目可以体会到这点. poj2096:Collecting Bugs #include <i ...

  8. 加州wonders教材扫盲

    加州语文教材主要包含以下内容: 1.主教材Reading/Writing Workshop(读写研讨) 2.拓展教材Literature Anthology(文学选集) 3.延伸阅读材料Leveled ...

  9. vmware虚拟机三种网络模式详解_转

    原文来自http://note.youdao.com/share/web/file.html?id=236896997b6ffbaa8e0d92eacd13abbf&type=note 由于L ...

  10. NSAttributedString

    1.    使用这个类,必须先导入CoreText框架. 2.    给UILabel设置attributedText了会导致给UILabel中text,font,textColor,shadowCo ...