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>