由引导页面操作功能出发总结的web storage应用

背景：以ionic为前端框架的app移动端需要更新首页功能，当用户首次登陆时会出现引导页面，来提示用户新功能。

做法：(1)在页面中设置isGuided变量；

<ion-content class="gray-bg" scroll="false" style="overflow: hidden;" ng-show="isSellBd && !isGuided">
        <img cache-src="{{guideImg}}" ng-click="nextGuide()" style="width:100%;height:100%;"/>
    </ion-content>

    <ion-content class="gray-bg" overflow-scroll="false" scrollbar-y="false" ng-show="isSellBd && isGuided">.....

             (2)初始化guideImg，初次登陆时，isGuided并未被localstorage存储过，因此该值为null。页面便显示引导页图片 

  var guideImages=["img/guide_01.png","img/guide_02.png","img/guide_03.png"];
    $scope.guideImg=guideImages[0];
    $scope.isGuided=localStorage.getItem("isGuided");//是否新功能指引过

            (3) 出现第一张引导页后，点击便会出现随后的引导页面，并将isGuided设为true,下次在登陆该系统时，localstorage里存储该项为true,因此会跳过引导页面，直接加载首页内容。

$scope.nextGuide=function(){
            localStorage.setItem("isGuided","true");
            if($scope.guideImg.indexOf("01")!=-1){
                $scope.guideImg=guideImages[1];
            }else if($scope.guideImg.indexOf("02")!=-1){
                $scope.guideImg=guideImages[2];
            }else{
                $rootScope.hideTabs = ' ';
                $scope.isGuided=true;
                getTaskNum();
            }
        };

总结：localStorage和sessionStorage这两个属性都代表同一个Storage对象--一个持久化关联数组，数组使用字符串来索引。两者都可被当做普通的Js对象来使用：通过设置属性值来存储字符串值等等。这两个对象还提供了正式的ApI:getItem(),setItem(),romoveItem(),clear()等。

两者区别：（1）有效期。通过LocalStorage存储的数据是永久性的，除非web应用刻意删除存储的数据，或者用户清除浏览器访问历史，否则永不删除。而sessionStorage的有效期和存储数据的脚本所在的最顶层窗口或者浏览器标签页是一样的，一旦关闭窗口或标签页，该对象所存储的数据就会被全部删除。

（2）作用域。localStorage的作用域是限制在文档源级别上的。文档源是通过主机名、协议、端口三者来确定的。而sessionStorage的作用域也是限制在文档源，而且还限定在窗口中。

cookie是一种早期的客户端存储机制，主要是针对服务器端脚本设计使用的，适合存储少量文本数据。