手记

本地存储location,微信分享

本地存储的方案

传统的存储:

cookie:把信息存储到客户端的浏览器中,服务器端可以获取,不是严禁的本地存储;

session:把信息存储到服务器上的;(服务器存储)

h5存储:webstorage

localStorage:永远的存储到客户端的本地;(信息永久存在,除非手动清除缓存)

sessionStorage:临时的会话存储,只要当前页面不关闭,信息就会存在,页面关系,存储的内容消失

cookie,localStorage,sessionStorage 区别

cookie: document.cookie = 'age = 7';

cookie 的存储有限制,最多4kb;localStrorage存储的5mb;

cookie兼容所有的的浏览器;; localstorage不兼容ie6-8;

cookie存储的内容有过期时间杀毒软件可能会清除cookie,localstorage永久性存储;

什么时候用 cookie 和 localStorage

cookie:记住用户密码或者自动登录,用户的部分信息,当用户登录成功后,把用户的信息记录到cookie中,以便在其他页面显示用户信息;购物车等;存储少量信息,浏览器兼容使用cookie

localStorage:存储向一些本地的html字符串和json数据,比如当我们向服务器发一次请求,我们把数据存储到本地存储,我们计算1分钟内刷新页面,不进行请求,渲染我们本地存储的html;超过一份中我们可以向服务器发送请求,(第一次请求的时间 和 刷新页面的时间)

localStorage.setItem('age', 7) ,localStorage.getItem('age',),localStrorage.removeItem('age'),

localStorage.clear() 把当前源下所有的存储标记移除;localStorage.length;

localStorage.setItem([key],json.stringify{"vlaue":2}) value 存储的必须是字符串

**中文编码escape** unescape;对中文的字符串进行编码和解码,防止传递存储过程出现乱码;

var str = ''编码‘’ ; var n = escape (str ); var m = unescape(n)

其他解码编码

encodeURL() decodeURL() ; encodeURLComponent() decodeURLCompontent()

微信分享

function _wechatConfig(o) {
        wx.config({
            debug: debug, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
            appId: o.appid, // 必填,公众号的唯一标识
            timestamp: o.timestamp, // 必填,生成签名的时间戳
            nonceStr: o.nonceStr, // 必填,生成签名的随机串
            signature: o.sign,// 必填,签名,见附录1
            jsApiList: [
                'onMenuShareTimeline',
                'onMenuShareAppMessage'
            ] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
        });
    }

    function _getWechatJsSdkInfo(callback) {
        var s = W.Storage.get(W.location.href + "_" + area);
            var appid ='wx7e80e8f93543a5c8';
            ajaxJsonCall('/wechat/service/WeChat.getJsSdkInfo.json', {
                url: W.location.href.split('#')[0],
                appid: appid
            }, function (data) {
                if (data.rtnCode === "000000") {
                    var o = data.responseData;
                    W.Storage.set(W.location.href + "_" + area, o, jsSdkTimeout);
                    callback(o);
                } else {
                    W.Storage.remove(W.location.href + "_" + area);
                }
            }, false);
    }

_getWechatJsSdkInfo(_wechatConfig);

wx.checkJsApi({
    jsApiList: [
        'getLocation',
        'onMenuShareTimeline',
        'onMenuShareAppMessage'
    ],
    success: function (res) {
        //alert(JSON.stringify(res));
    }
});

//var url = "www.zaichengdu.com" + app_path;
var url = curDomain;
function _shareAppMessage() {
    // 页面加载后设置微信分享给朋友的内容
    wx.onMenuShareAppMessage({
        title: '圣诞老人送礼啦,现金红包人人领!', // 分享标题
        desc: '“圣诞夺包”35000份礼包等你拆!', // 分享描述
        link: encodeURI(curDomain + '/christmas/service/ChristmasSockOnline.home.do?area=cd'),//encodeURI(window.location.href.replace('&from=ad', '')), // 分享链接
        imgUrl: url + '/public/christmas/img/shorejoin.jpg', // 分享图标
        type: '', // 分享类型,music、video或link,不填默认为link
        dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
        success: function () {
            // 用户确认分享后执行的回调函数
            //Message.toast.success("分享成功!").appear();
        },
        cancel: function () {
            // 用户取消分享后执行的回调函数
            //alert('cancel');
        }
    });
}

function _shareTimeline() {
    // 设置分享到朋友圈的内容
    wx.onMenuShareTimeline({
        title: '圣诞老人送礼啦,现金红包人人领!', // 分享标题
        link: encodeURI(curDomain + '/christmas/service/ChristmasSockOnline.home.do?area=cd'),//encodeURI(window.location.href.replace('&from=ad', '')), // 分享链接
        imgUrl: url + '/public/christmas/img/shorejoin.jpg', // 分享图标
        success: function () {
            // 用户确认分享后执行的回调函数
            Message.toast.success("分享成功!").appear();
        },
        cancel: function () {
            // 用户取消分享后执行的回调函数
            //alert('cancel');
        }
    });
}

wx.ready(function () {
    // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
    //alert('success');
    _shareAppMessage();
    _shareTimeline();
});

wx.error(function (res) {
    // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
    //alert('error');
});
1人推荐
随时随地看视频
慕课网APP