Html5-localStorage 介绍和基本使用

这段时间一直在进行AngularJS的入门学习，前一段简单看几篇教程，以及敲了一些demo。
现在尝试做个小应用，TodoList。很眼熟吧，这是很多 MVC 入门经常被用到的小李子。这部分的经验也会在后面分享出来，今天先介绍下里面用到的本地存储方式 Html5 的localStorage。

为什么要用localStorage

功能实现方面的原因

TodoList 一个功能是，需要把之前的记录也能显示出来，由于页面刷新，以及关闭浏览器等原因，我们自己的js 存储的数据肯定会丢失，从后端获取又要重新请求数据，这里前端自己就可以“自给自足”~ 即，使用浏览器本地存储。

为什么不是cookie

提到比较流传广泛的本地存储，第一个想到的肯定不是 localStorage,而是cookie。这里参考了不少网络上牛人的文章，在末尾会有参考索引供大家查看，介绍的比我详细。cookie的优点就是应用广泛，所有浏览器都能实现—来自张鑫旭大神的博客，我没验证过~，但不足是容量比较小—-4kb,而且，读取和存储还要自己来，当然网上方法一大堆。

localStorage 有5M大小，而且IE8 都支持了，也不错，而且自身提供了读取存储和删除的方法，使用起来较为方便。

具体使用介绍

这部分我们按照js实现方法来介绍，分为 原生 JavaScript, jQuery, AngularJS。
这里有一点非常值得注意，就是localStorage存储数据的时候，不论数据原来是什么格式，统一存储为字符串。所以我们读取数据的时候，需要自己进行数据解析，将他解析为我们想要用的格式。

  • 删除
    localStorage.removeItem("store");
  • 读取
    localStorage.getItem("store");
  • 存储
    localStorage.setItem("store",data);

接下来主要介绍各种方式实现的对数据的转换，从而利用localStorage。

原生JavaScript

  • 读取数据
    var store = localStorage.getItem("store");
    var data = store.split(",");
    var i,len = data.length;
    for(i = 0; i < len; i++){
        #操作数据
    }
  • 存储数据

这里就是给localStorage 添加一个属性值,这部分来博客园 xiaowei0705 的博客。
这里突然有了一个疑问，为什么还需要用Jquery AngularJS 在存储数据的时候，进行转换呢？

    localStorage.a = 3;//设置a为"3"
    localStorage["a"] = "sfsf";//设置a为"sfsf"，覆盖上面的值
    localStorage.setItem("b","isaac");//设置b为"isaac"

jQuery

  • 读取数据
    var store = localStorage.getItem("store");
    var data = JSON.parse(store);
  • 存储数据
    var store = JSON.Stringify(data);
    localStorage.setItem("store",store);

AngularJS

  • 读取数据
    var store = localStorage.getItem("store");
    var data = angular.fromJson(store);
  • 存储数据
    var store = Angular.toJson(data);
    localStorage.setItem("store",store);

demo

做了一个小demo,也是参考博客园 xiaowei0705 的博客。主要就是实现了点击按钮就记录当期页面访问次数，如果不点击就不会记录，算是对localStorage 使用练习。

Html

<h3>2.Html5 localStorage 实现本地存储</h3>
<div class="container">
    <p class="localStorage">您已经第<span class="localStorage-time"></span>次来到这个页面了~~</p>
    <p class="color-red">点击按钮可以存储访问次数到本地浏览器，否则不会记录访问次数</p>
    <button class="storeStorage">存储数据</button>
</div>

JavaScript


    $(document).ready(function(){
        var demo = {};
        demo.localStorage = function (){
            var times;
            console.log(localStorage.getItem("loadTime"));
            if(!localStorage.getItem("loadTime")){
                times = 0;
            }else{
                times = parseInt(localStorage.getItem("loadTime"));
            }
            console.log(times);
            times += 1;
            $(".storeStorage").attr("storeTimes",times);
            $(".localStorage-time").html(times);

        }
        demo.localStorage();

        demo.saveStorage = function (){
            localStorage.setItem("loadTime",$(".storeStorage").attr("storeTimes"));
        }

        $(".storeStorage").on('click', demo.saveStorage);
        })
    }

最后我们看到的效果，就如下图所示：

结尾

自己之前没用过localStorage，第一次用肯定有疏漏和不对的地方，本文内容大部分来自对参考文献中文章的总结，以及一点自己的思考，请大家看到这篇博文的带着批判的眼光来对待，同时多参考其他靠谱的内容，也可以看我后面列出的，我参考的文章，质量都非常的过硬，我们一起向他们认真严谨的态度学习~~~同时，对我博文的问题，欢迎大家提出宝贵意见。

参考文献

  1. HTML5 localStorage本地存储实际应用举例—张鑫旭大神博客
  2. HTML5 LocalStorage 本地存储—博客园xiaowei0705的博客，介绍的非常详细，还有实例
  3. HTML5本地存储Localstorage—博客园叶小钗，demo 很牛。以后还要再来学习。
  4. store.js - 轻松实现本地存储（LocalStorage）—一个本地存储的插件，看着很好用，还没尝试。