angularJs数据存储
最终效果图
介绍下H5的本地存储技术
sessionStorage,叫做会话存储 生命周期：从浏览器打开到关闭的过程 大小:5M 保存位置:浏览器端 setItm(key,value) getItem(key) removeItem(key)
localSrotage，叫做永久存储 生命周期：永久，除非人为删除 大小:大于等于5M 保存位置:浏览器端 setItem(key,value) getItem(key) removeItem(key)
cookie 作用:浏览器和服务器通信 特点: 大小:4kb 保存在浏览器端 每次发送请求都会携带 cookie容易被截获，不安全 生命周期: 会话的cookie从浏览器打开到浏览器关闭 自定义cookie取决于人为设
代码部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>主页</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div class="container" ng-controller="myCtrl">
<div class="row">
<div class="col-md-4">
<textarea class="form-control" rows="3" ng-model="content"></textarea>
</div>
<div class="col-md-4">
<a class="btn btn-default" href="#" role="button" ng-click="add()">存储</a>
<button class="btn btn-default" type="submit" ng-click="get()">获取</button>
</div>
<div class="col-md-4">
<input class="btn btn-default" type="button" value="删除" ng-click="del()">
<input class="btn btn-default" type="submit" value="Submit">
</div>
</div>
</div>
</body>
<script>
angular.module('myApp',[])
.controller('myCtrl',function($scope){
$scope.add=function(){
var content=$scope.content;
localStorage.setItem("key",JSON.stringify(content));
var flag=localStorage.getItem("key");
//alert("数据保存好了"+content+","+flag);
if(flag.length!=0){
alert("数据保存成功");
}
}
$scope.get=function(){
var flag=localStorage.getItem("key");
$scope.content=JSON.parse(flag);
}
$scope.del=function(){
localStorage.removeItem("key");
}
})
</script>
</html>
