jQuery前端参数传递方案

以你之姓@ 2022-12-10 14:56 183阅读 0赞

# 前端参数传递方案 #

## 需求 ##

在页面之间进行传值的时候，如果遇到参数长度非常大的时候，我们直接url传值会400错误，
     参数太长。我们当然可以把参数经过post后台传递，但是请求产生的网络开销呢？下面介绍几种方式好不好

## cookie ##

将需要传递的参数   
    
    参数传递起始页面：setCookie(key,value);
    参数接受页面：getCookie（key）;
    
    代码如下：
    
    function setCookie(name,value)
    {
      var Days = 30; //此 cookie 将被保存 30 天
      var exp  = new Date();    //new Date("December 31, 9998");
      exp.setTime(exp.getTime() + Days*24*60*60*1000);
      document.cookie = name + "="+ escape(value) +";expires="+ exp.toGMTString();
    }
    function getCookie(name)
    {
      var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
      if(arr != null) return unescape(arr[2]); return null;
    }
    
    
    但是这样做的问题就是，用户假如禁用了cookie，那么这些方法将无效

## LocalStorage ##

1、localStorage拓展了cookie的4K限制2、localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的localStorage的局限1、浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性
    2、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换
    3、localStorage在浏览器的隐私模式下面是不可读取的
    4、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
    5、localStorage不能被爬虫抓取到localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空
    
    语法：
    获取键值：localStorage.getItem(“key”)
    设置键值：localStorage.setItem(“key”,”value”)
    清除键值：localStorage.removeItem(“key”)
    清除所有键值：localStorage.clear()
    获取键值2：localStorage.keyName
    设置键值2：localStorage.keyName = “value”

## js生成唯一的key ##