强大的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. Kib Kb KB KIB 区别

    今天和同事聊了一下Kib Kb KB KIB这几个单位的含义及其区别,自己在网上也查了查资料,总结如下: Ki 和 K 只是数学单位 Ki = 1024 K  = 1000 这二者之间没有任何联系 B ...

  2. C++位操作符总结

    #include <stdio.h> #include <memory.h> #include <malloc.h> #define MaxBinLength 16 ...

  3. PowerDesigner生成SQL Server 2008脚本注释乱码的问题

    [%OWNER%?[.O:[execute ][exec ]]sp_addextendedproperty [%R%?[N]]'MS_Description', N[%R%?[N]]%.q:COMME ...

  4. Cocos2d-JS工程中的文件结构

    res文件夹存放资源文件 src文件夹是主要的程序代码 app.js是实现游戏场景的JavaScript文件 resource.js在src文件夹中,定义资源对应的变量 config.json保存模拟 ...

  5. iOS初级数据持久化 沙盒机制 归档与反归档

    数据持久化就是数据保存成文件,存储到程序中的沙盒中. 沙盒构成 Document 存储用户数据,需要备份的信息 Caches 缓存文件, 程序专用的支持文件 Temp 临时文件 通过代码查找程序沙盒的 ...

  6. windows安装java环境

    1.下载安装jdk:以jdk-8u66-windows-x64为例. 2.JDK的环境变量配置 用鼠标右击“计算机”,选择“属性”->“高级系统设置”->“环境变量”->“系统变量” ...

  7. apache httpclient 4.5 兼容 http https

    String responseContent = ""; try { SSLContextBuilder contextBuilder = new SSLContextBuilde ...

  8. logstash

    logstash作为数据搜集器,主要分为三个部分:input->filter->output  作为pipeline的形式进行处理,支持复杂的操作,如发邮件等 input配置数据的输入和简 ...

  9. https://www.zhihu.com/question/52020960#answer-47024535

    https://www.zhihu.com/question/52020960#answer-47024535

  10. Oracle本地网络分表模拟分区裁剪

    来自讨论贴 http://www.itpub.net/thread-1877111-1-1.html 准备数据表 2014-07-20 01:38:10>create table tb_1 as ...