H5 本地存储技术
1、sessionStorage(会话存储)
- 生命周期：浏览器打开到关闭的过程
- 大小：5M
- 保存位置：浏览器端
2、localStorage(永久存储)
- 生命周期：永久除非人为删除
- 大小：5M甚至更大
- 保存位置：浏览器端
- setItem(‘key‘,value)
- getItem(‘key‘)
- removeItem(‘key‘)
3、cookie
作用：用于浏览器和服务器端进行通信
特点：
大小：4kb
每次发送请求都携带，导致占用带宽
保存在浏览器端
cookie容易被截获，导致不安全。
生命周期
- 会话cookie：浏览器打开到关闭的过程
- 人为设置cookie：人为设置时间
?
<body ag-app="myApp">
<div ng-controller="myCtrl">
<h2我的备忘录></h2>
<div>
<input type="text" ng-model="newToDo">
<button ng-click="add()">添加</button>
<div ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.isCheched">
<span>{{todo.name}}</span>
</div>
<button ng-click="del()">删除选中的数据</button>
</div>
</div>
</body>
angular.module(‘myApp‘,[])
.controller(‘myCtrl‘,function($scope) {
$scope.todos = [
{name:‘吃饭‘，isChecked:false},
{name:‘睡觉‘，isChecked:true},
{name:‘打豆豆‘，isChecked:false}
];
$scope.add = function (){
//判断用户输入的内容是否合法
if(!$scope.newToDo){
alert("输入的内容不能为空");
return;
}
var obj = {
name:$scope.newToDo,
isChecked:false
};
//要干嘛 收集整理数据
$scope.todos.unshift(obj);
$scope.newToDo = ‘‘;
}
//删除方法一：
/*
$scope.del = function(){
$scope.todos.foreach(function(item,index){
//找到选中的按钮
if(item.isChecked){//用户选中当前的
$scope.todos.splice(index,1);
$scope.del();
}
})
*/
// 方法二：
$scope.del = function(){
var oldTodo = $scope.todos;
$scope.todos = [];
oldTodo.foreach(function(item,index){
//找到未选中的留下来
if(!item.isChecked){
$scope.todos.push(item);
}
})
}
}
})