强大的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. uzqp文件的加解密

    帮朋友做的,根据python版本翻译成的java版本,记录一下代码 import java.io.File; import java.io.FileInputStream; import java.i ...

  2. ASP.NET MVC3更新出错:ObjectStateManager中已存在具有同一键的对象

    程序代码: [HttpPost] public ActionResult Edit(Person person) { if (ModelState.IsValid) { Person oldperso ...

  3. clang: error: no such file or directory: 报错

    clang: error: no such file or directory: '/Users/KuaiYong/Desktop/svn/gamebox_v1.2/SettingViewContro ...

  4. js判断是电脑访问手机版网站,跳转到电脑版

    function uaredirect(murl,wurl){ //murl为手机网站域名,wurl为电脑版网站域名地址 67 try { 68 if(document.getElementById( ...

  5. C#获取管理员权限

    在进行C盘的读写时,有时会需要用到管理员权限 //找到位于 Properties 下面的 app.manifest 文件 将<requestedExecutionLevel level=&quo ...

  6. 【转】Android的材料设计兼容库(Design Support Library)

    转自:http://www.jcodecraeer.com/a/anzhuokaifa/developer/2015/0531/2958.html?mType=Group Android的材料设计兼容 ...

  7. 利用NSUserdefaults来存储自定义的NSObject类及自定义类数组

    利用NSUserdefaults来存储自定义的NSObject类及自定义类数组 1.利用NSUserdefaults来存储自定义的NSObject类 利用NSUserdefaults也可以来存储及获取 ...

  8. 01 viewport

    <meta name="viewport" content="width=device-width,initial-scale=1.0">

  9. H3C S3600-28TP-SI配置命令

    模式分类为:<H3C> 用户视图       [H3C] 系统视图    [H3C-Ethernet1/0/1] 以太网端口视图 [H3C-vlan10] VLAN视图   [H3C-Vl ...

  10. passport 自动取密码

    django settings.py """ Django settings for password project. Generated by . For more ...