HTML代码
<!DOCTYPE html>
<html ng-app="yk">
<head>
<meta http-equiv="Content-type" content="text/html;charset=utf-8">
<title>angularJS 本地存储 localStorage.setItem() | localStorage.getItem()</title>
<link rel="stylesheet" href="../../lib/bootstrap.min.css">
<script type="text/javascript" src="../../lib/angular.min.js"></script>
<script type="text/javascript" src="./js/index.js"></script>
</head>
<body>
<div ng-controller="ctrl">
<div class="container">
<div class="panel panel-default">
<div class="panel-heading text-center">
<!-- 从JS里获取默认的数据 并放到本地存储 localStorage中 -->
<button class="btn btn-info" ng-click="setLocalStorage()">设置数据</button>
<!-- 从 localStorage 中获取刚存入的数据 -->
<button class="btn btn-info" ng-click="getDataLocalStorage()">读取数据</button>
<!-- 修改数据 点页面中的保存按钮,再次保存到 localStorage 中-->
<button class="btn btn-info" ng-click="modifyLocalStorage()">修改数据</button>
<!-- 从localStorage中清空一条数据 -->
<button class="btn btn-info" ng-click="removeLocalStorage()">删除一条数据</button>
<!-- 清空整个localStorage -->
<button class="btn btn-info" ng-click="clearLocalStorage()">清空数据</button>
</div>
<div class="panel-body">
<!-- 开始默认显示内容 -->
<div ng-if="beginHere">
开始 LocalStorage 之旅前,LocalStorage 里什么都没有,你可以依次点 F12 ,切换到 Resources 面板里的 Local Storage 页签查看数据情况。所以现在你只需要点击设置数据就可以把默认的数据存储到 LocalStorage 里了。
</div>
<div ng-if="!beginHere">
<!-- message END-->
<div class="message">
<div ng-if="setFlag">
<p>恭喜,localStorage 数据设置成功!你可以依次点 F12 ,切换到Resources面板里的 Local Storage 页签查看数据情况</p>
</div>
<div ng-if="getFlag || modifyFlag || removeFlag">
<table class="table table-bordered table-striped">
<thead>
<tr>
<td>序号</td>
<td>姓名</td>
<td>城市</td>
<td>对应值</td>
<td>国家</td>
<td ng-if="removeFlag">操作</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="v in getData">
<td><input class="form-control" type="text" ng-model="$index" ng-disabled="chmod"></td>
<td><input class="form-control" type="text" ng-model="v.person" ng-disabled="chmod"></td>
<td><input class="form-control" type="text" ng-model="v.city" ng-disabled="chmod"></td>
<td><input class="form-control" type="text" ng-model="v.value" ng-disabled="chmod"></td>
<td><input class="form-control" type="text" ng-model="v.country" ng-disabled="chmod"></td>
<td ng-if="removeFlag"><button class="btn btn-danger" ng-click="removeItemLocalStorage($index)">删除</button></td>
</tr>
<tr ng-if="modifyFlag || removeFlag">
<td colspan="4" ng-if="modifyFlag"></td>
<td colspan="5" ng-if="removeFlag"></td>
<td ng-class="{'text-right':modifyFlag}">
<button class="btn btn-success" ng-click="saveLocalStorage()" ng-if="modifyFlag">提交</button>
<button class="btn btn-success" ng-click="saveItemLocalStorage()" ng-if="removeFlag">提交</button>
</td>
</tr>
</tbody>
</table>
</div>
<div ng-if="saveSuccess">
<p>恭喜,localStorage 数据修改成功!你可以依次点 F12 ,切换到Resources面板里的 Local Storage 页签查看数据情况</p>
</div>
<div ng-if="clearFlag">
<p>恭喜,localStorage 数据清空成功!你可以依次点 F12 ,切换到Resources面板里的 Local Storage 页签查看数据情况</p>
</div>
</div>
<!-- message END-->
</div>
</div>
</div>
</div>
</div>
</body>
</html>
JavaScript 代码
var m = angular.module("yk",[]);
m.controller("ctrl",["$scope",function($scope){
$scope.dataArray = [
{person:"大明",city:"珠海",value:"zhuhai",country:"China"},
{person:"大黑",city:"广州",value:"guangzhou",country:"China"},
{person:"大白",city:"深圳",value:"shenzhen",country:"China"},
{person:"大红",city:"韶关",value:"shaoguan",country:"China"},
{person:"大树",city:"Alaska",value:"alaska",country:"America"},
{person:"大头",city:"New York",value:"newyork",country:"America"},
{person:"大风",city:"Washington",value:"washington",country:"America"},
{person:"大浪",city:"California",value:"california",country:"America"}
];
$scope.beginHere = true;
// 修改一条或者多条数据后的保存按钮处理函数
$scope.saveLocalStorage = function(){
localStorage.clear();
localStorage.setItem("data",angular.toJson($scope.getData));
}
// 把 $scope.dataArray 的数据存放到 LocalStorage中
$scope.setLocalStorage = function(){
$scope.beginHere = false;
$scope.setFlag = true;
$scope.getFlag = false;
$scope.modifyFlag = false;
$scope.clearFlag = false;
$scope.removeFlag = false;
$scope.saveSuccess = false;
localStorage.setItem("data",angular.toJson($scope.dataArray));
}
//从 LocalStorage 里取数据
$scope.getDataLocalStorage = function(){
if(localStorage.length == 0){
alert("请先点击 {设置数据} 按钮");
}else{
$scope.beginHere = false;
$scope.setFlag = false;
$scope.getFlag = true;
$scope.chmod = true;
$scope.modifyFlag = false;
$scope.clearFlag = false;
$scope.removeFlag = false;
$scope.saveSuccess = false;
$scope.getData = angular.fromJson(localStorage.getItem("data"));
}
}
//切换到修改数据页面
$scope.modifyLocalStorage = function(){
$scope.hasLocalStorage();
$scope.beginHere = false;
$scope.setFlag = false;
$scope.getFlag = false;
$scope.chmod= false;
$scope.modifyFlag = true;
$scope.clearFlag = false;
$scope.removeFlag = false;
$scope.saveSuccess = false;
$scope.modityResult = localStorage.getItem("data");
}
//清空 LocalStorage
$scope.clearLocalStorage = function(){
$scope.hasLocalStorage();
$scope.beginHere = true;
$scope.setFlag = false;
$scope.getFlag = false;
$scope.modifyFlag = false;
$scope.clearFlag = false;
$scope.removeFlag = false;
$scope.saveSuccess = false;
localStorage.clear();
console.log(angular.fromJson(localStorage.getItem("data")));
$scope.getData = angular.fromJson(localStorage.getItem("data"));
}
// 切换到删除数据页面
$scope.removeLocalStorage = function(){
$scope.hasLocalStorage();
$scope.beginHere = false;
$scope.setFlag = false;
$scope.getFlag = false;
$scope.modifyFlag = false;
$scope.clearFlag = false;
$scope.removeFlag = true;
$scope.saveSuccess = false;
$scope.chmod = true;
}
// 删除一条数据
$scope.removeItemLocalStorage = function(index){
$scope.getData.splice(index,1);
$scope.saveSuccess = false;
}
// 删除一条数据后,保存按钮处理函数
$scope.saveItemLocalStorage = function(){
localStorage.setItem("data",angular.toJson($scope.getData));
$scope.saveSuccess = true;
}
// 判断 LocalStorage 是否已经存在
$scope.hasLocalStorage = function(){
if(localStorage.length == 0){
alert("请先点击 {设置数据} 按钮 ");
}else{
if($scope.getData == undefined){
alert("请先点击 {读取数据} 按钮 ");
}
}
}
}]);
这个例子里面的JS 代码有点多,但是主要的代码就那么几行,其余的 ture、false 都是用于判断显示隐藏页面用的。