今天写到app的浏览记录的功能，由于之前写微信端的是存储在cookie里的，拿进拿出都很方便，但是在webapp里，似乎不能用cookie了，在Html4的时代在浏览器端存储点网站个性化的数据，尤其是用户浏览器的痕迹，用户的相关数据等一般只能存储在Cookie中，但是大多是浏览器对于Cookie的限制也就逼迫网站存储数据尽量精简，想存储复杂的、关系型的用户数据就根本不可能了。但是进入Html5时代，这一切都不叫事…现在用到的是html5里的本地数据库来完成这个功能。

如今在最新的JS的API中增加了localStorage对象，以便于用户存储永久存储的Web端的数据。而且数据不会随着Http请求发送到后台服务器，而且存储数据的大小机会不用考虑，因为在HTML5的标准中要求浏览器至少要支持到4MB.所以，这完全是颠覆了Cookie的限制，为Web应用在本地存储复杂的用户痕迹数据提供非常方便的技术支持。那接下里分别介绍一下localStorage的常用的方法，当然基本上跟sessionStorage是一致的。

localStorage提供了四个方法来辅助我们进行对本地存储做相关操作。

（1）setItem(key,value)：添加本地存储数据。两个参数，非常简单就不说了。 
（2）getItem(key):通过key获取相应的Value。 
（3）removeItem(key):通过key删除本地数据。 
（4）clear():清空数据。

我们可以把浏览的数据存储在这个localStorage中。

//将浏览过的商品添加进本地数据库function addViewGoods(good) {

    var lateBrowseHistoryStr = window.localStorage.getItem("lateBrowseHistoryStr");//取出json字符串

    var lateBrowseHistory = [];                                                     //临时存储数组

    if (lateBrowseHistoryStr != null && lateBrowseHistoryStr != "") {

        var lateBrowseHistoryFromDb = $.evalJSON(lateBrowseHistoryStr);             //将json字符串转化为数组对象进行遍历

        for (var i = 0; i < lateBrowseHistoryFromDb.length; i++) {

            var lateGood = lateBrowseHistoryFromDb[i];

            debugger

            if (lateGood.objId != good.objId) {                                    //查看浏览商品是否已存在

                lateBrowseHistory.push(lateGood);                                  //将不相同的已有商品放进临时存储数组中

            }

        }

    }

    lateBrowseHistory.push(good);                                                  //将浏览商品放进临存储数组中

    lateBrowseHistoryStr = $.toJsonString(lateBrowseHistory);

    window.localStorage.setItem("lateBrowseHistoryStr", lateBrowseHistoryStr);

}

以上是添加功能，对象字符串之间的转换是用了自己分装的方法，就不详细说明了。

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道