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>
posted @ 2023-03-27 21:26  板凳哲学家  阅读(45)  评论(0)    收藏  举报