localStorage和sessionStorage的区别及用法

1.简介

webstorage是本地存储，存储在客户端(浏览器端)，包括localStorage和sessionStorage。

localStorage

localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。

sessionStorage

sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。源生接口可以接受，亦可再次封装来对Object和Array有更好的支持。

 

2.用法

localStorage和sessionStorage使用相同的API方法，数据都是以key-value的形式存储：

    localStorage.setItem("key","value");//以“key”为名称存储一个值“value”

    localStorage.getItem("key");//获取名称为“key”的值

    localStorage.removeItem("key");//删除名称为“key”的信息。

    localStorage.clear();​//清空localStorage中所有信息

3.区别与注意事项

（1）作用域不同

不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标 签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。

（2）数据类型

存储的数据类型必须是String类型，比如存储的数据类型是Object对象的时候，要通过JSON.stringify(obj)转换为String类型，获取之后再通过JSON.parse(strData)解析。

（3）使用场景

从A页面跳转到B页面时，需要传递A页面的参数到B页面，但是有又不需要访问后台数据库，可以使用localStorage或sessionStorage，建议使用sessionStorage，因为sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除。

（4）数据量非常大的参数传递不建议使用localStorage和sessionStorage，因为会出现数据莫名其妙的丢失。

4.实例

下面是一个列表页面使用sessionStorage保存查询参数，进入查看详情页面之后，获取并传递参数，返回列表页面再次获取到原来查询参数，记录原来查询状态的例子。

首先，第一个页面epaSearchList.html ，set操作，保存查询参数到sessionStorage：

var vue = new Vue({
    el: '#app',
    data: {
        tableData: [],
        content: '',
        loading: false,
        pageCurrent: 1, //当前页数
        pageSize: 10, //每页条数
        totalRecord: 0, //总条数
        ticketId: Util.getParam("ticketId"),
        paramData: {
            manifestNo: '',
            transferPlanNo: '',
            receiveEnterpriseName: '',
            transEnterpriseName:'',
            transportEnterpriseName:'',
            busiStatus: '',
            wasteName: '',
            wasteCode: '',
            transBeginDate: '',
            transEndDate: '',
            receiveBeginDate: '',
            receiveEndDate: '',
            receiveAreaCode: '',
            receiveAreaLevel: '',
            transAreaCode: '',
            transAreaLevel: '',

        },
    },
    created: function () {
        this.initTable();
        ...
    },
    methods: {
        openView: function (row) {
            //查询之后,查看,返回原查询结果,操作
            var viewParam = this.paramData;
            sessionStorage.setItem("viewParam", JSON.stringify(viewParam));
            location = "/main/view/transfer/wastetransfer/view.html?ticketId="+this.ticketId + "&id=" + row.id;
    },
    
  ...
}
});

其次，第二个页面view.html 在返回列表页面之前，get and set操作，从sessionStorage获取并继续保存和传递此参数：

goList: function () {
            //查询之后,查看,返回原查询结果,操作
            var viewParam = sessionStorage.getItem("viewParam");
            if (viewParam != null) {
                var viewParamTemp = JSON.parse(viewParam);
                sessionStorage.setItem("viewParamTemp", JSON.stringify(viewParamTemp));
            }
            window.history.go(-1);
        },

最后，返回第一个列表页面epaSearchList.html之后，再次从sessionStorage获取到原来的参数，且保存和使用之后，做清空操作sessionStorage.clear() ：

initTable: function () {
            var vm = this;
            //查询之后,查看,返回原查询结果,操作
            var viewParamTemp = sessionStorage.getItem("viewParamTemp");
            if (viewParamTemp != null) {
                vm.paramData = JSON.parse(viewParamTemp);

                vm.dataRangeTrans[0]=vm.paramData.transBeginDate;
                vm.dataRangeTrans[1]=vm.paramData.transEndDate;
                vm.dataRangeSign[0]=vm.paramData.receiveBeginDate;
                vm.dataRangeSign[1]=vm.paramData.receiveEndDate;
                if(vm.paramData.receiveAreaCode != null){
                    vm.defaultReceiveAreaCode = vm.initDefaultArea(vm.paramData.receiveAreaCode);
                }
                if(vm.paramData.transAreaCode !=null){
                    vm.defaultTransAreaCode = vm.initDefaultArea(vm.paramData.transAreaCode);
                }
            }

            vm.loading = true;
            if (vm.dataRangeTrans) {
                vm.paramData.transBeginDate = Util.timeFormat(this.dataRangeTrans[0], 'YYYY-MM-DD');
                vm.paramData.transEndDate = Util.timeFormat(this.dataRangeTrans[1], 'YYYY-MM-DD');
            } else {
                vm.paramData.transBeginDate = '';
                vm.paramData.transEndDate = '';
            }

            if (vm.dataRangeSign) {
                vm.paramData.receiveBeginDate = Util.timeFormat(this.dataRangeSign[0], 'YYYY-MM-DD');
                vm.paramData.receiveEndDate = Util.timeFormat(this.dataRangeSign[1], 'YYYY-MM-DD');
            } else {
                vm.paramData.receiveBeginDate = '';
                vm.paramData.receiveEndDate = '';
            }

            //行政区划
            vm.paramData.receiveAreaCode = vm.defaultReceiveAreaCode[vm.defaultReceiveAreaCode.length - 1];
            vm.paramData.receiveAreaLevel = Util.getLevelByareaCode(vm.defaultReceiveAreaCode);
            vm.paramData.transAreaCode = vm.defaultTransAreaCode[vm.defaultTransAreaCode.length - 1];
            vm.paramData.transAreaLevel = Util.getLevelByareaCode(vm.defaultTransAreaCode);


            var requestData = {
                ticketId: vm.ticketId,
                size: vm.pageSize,
                current: vm.pageCurrent,
                manifestNo: vm.paramData.manifestNo,
                transferPlanNo: vm.paramData.transferPlanNo,
                receiveEnterpriseName: vm.paramData.receiveEnterpriseName,
                transEnterpriseName:vm.paramData.transEnterpriseName,
                transportEnterpriseName:vm.paramData.transportEnterpriseName,
                busiStatus: vm.paramData.busiStatus,
                transBeginDate: vm.paramData.transBeginDate,
                transEndDate: vm.paramData.transEndDate,
                receiveBeginDate: vm.paramData.receiveBeginDate,
                receiveEndDate: vm.paramData.receiveEndDate,
                wasteCode: vm.paramData.wasteCode,
                wasteName: vm.paramData.wasteName,
                receiveAreaCode: vm.paramData.receiveAreaCode,
                receiveAreaLevel: vm.paramData.receiveAreaLevel,
                transAreaCode: vm.paramData.transAreaCode,
                transAreaLevel: vm.paramData.transAreaLevel,
                actionType: Util.getParam("type"),
            }

            $.ajax({
                url: '/solidwaste/transferManifest/listSpecialTransfer',
                dataType: 'json',
                type: 'post',
                data: requestData,
                success: function (result) {
                    vm.loading = false;
                    if (result.success == true) {
                        vm.tableData = result.data;
                        vm.totalRecord = parseInt(result.total);
                        vm.initExpands();
                        vm.initSummaryStatistics(requestData);

                        //查询之后,查看,返回原查询结果,操作
                        sessionStorage.clear();
                    }
                }
            })
        },