TP框架中assign方法传输过来的数组如何放到js中使用

最新推荐文章于 2024-03-05 19:36:05 发布

jachinFang

最新推荐文章于 2024-03-05 19:36:05 发布

阅读量5.3k

点赞数 3

分类专栏： PHP TP

本文链接：https://blog.csdn.net/jachinFang/article/details/90474002

版权

PHP 同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

8 篇文章 0 订阅

订阅专栏

php语言

js语言

数组需要将其转换为json格式，然后通过js解析json，将json格式转换为数组，才可以打印

<script type="text/javascript">
    var arr='<?php echo json_encode($nav) ?>';

    var nav=JSON.parse(arr);

    console.log(nav);
</script>

console.log('{$a}');
console.log('{$b}');

数字与字符串可以直接引用

那么还有一个问题，当tp框架使用$this->assign('a',$a);到的是index.html页面的时候，那么你需要将该a数据传递到b.js中使用的时候，那么你需要怎么做呢？

那么你就需要使用js的3种存储方式来传递，它们分别是

sessionStorage、localStorage、cookier

现在就也分析一下他们存储的相同点和不同点

相同点是：都保存在浏览器端，同源。

不同点是

传递方式不同

cookie在浏览器和服务器之间来回传递

sessionStorage和localStorage仅保存在本地（浏览器端）

数据大小不同

cookie数据还有路径的概念，可以限制cookie只属于某一个路径下

存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。

sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

数据有效期不同

sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；

localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；建议每次用完后清楚缓存比较好

cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。

作用域不同

sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；

localStorage 在所有同源窗口中都是共享的；

cookie也是在所有同源窗口中都是共享的。

Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。

Web Storage 的 api 接口使用更方便。

总而言之

localStorage只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份localStorage数据。
sessionStorage比localStorage更严苛一点，除了协议、主机名、端口外，还要求在同一窗口（也就是浏览器的标签页）下。
localStorage是永久存储，除非手动删除。
sessionStorage当会话结束（当前页面关闭的时候，自动销毁）
cookie的数据会在每一次发送http请求的时候，同时发送给服务器而localStorage、sessionStorage不会。

localStorage(本地存储)

（只能存储字符串，当你存储数组或者对象的时候，需要将其转换为json格式这样才能获取你想要的数据，否则当你提取出来的数据提示是object）

特点：

生命周期：持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
存储的信息在同一域中是共享的。
当本页操作（新增、修改、删除）了localStorage的时候，本页面不会触发storage事件,但是别的页面会触发storage事件。
大小：据说是5M（跟浏览器厂商有关系）
在非IE下的浏览中可以本地打开。IE浏览器要在服务器中打开。
localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
localStorage受同源策略的限制

设置：localStorage.setItem('name','justin');localStorage.name =’justin； localStorage[“name”]=’justin’；

获取：var name=localStorage.getItem('name');var name = localStorage[“name”] ;var name= localStorage.name

删除：localStorage.remove('name');localStorage.removeItem(“name”); localStorage.name＝”;

一次清除所有存储：localStorage.clear();

JSON.stringify(info)将数据转为json格式，JSON.parse()将json转换为数组或者对象

sessionStorage 其实跟localStorage差不多，也是本地存储，会话本地存储

特点：

用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。关闭窗口后，sessionStorage即被销毁，或者在新窗口打开同源的另一个页面，sessionStorage也是没有的。

Cookie

特征

不同的浏览器存放的cookie位置不一样，也是不能通用的。
cookie的存储是以域名形式进行区分的，不同的域下存储的cookie是独立的。
我们可以设置cookie生效的域（当前设置cookie所在域的子域），也就是说，我们能够操作的cookie是当前域以及当前域的所有子域
一个域名下存放的cookie的个数是有限制的，不同的浏览器存放的个数不一样,一般为20个。
每个cookie存放的内容大小也是有限制的，不同的浏览器存放大小不一样，一般为4KB。
cookie也可以设置过期的时间，默认是会话结束的时候，当时间到期自动销毁

设置cookie的选项有expires、domain、path、secure（只有在https协议的网页中，客户端设置secure类型的 cookie 才能成功）、HttpOnly（仅有服务端可以设置，客户端无法设置）

domain是域名，path是路径，两者加起来就构成了 URL，domain和path一起来限制 cookie 能被哪些 URL 访问。

expires则是有效时间

document.cookie="name=justin;secure'

把cookie设置为secure，只保证 cookie 与服务器之间的数据传输过程加密，而保存在本地的 cookie文件并不加密

重要点是：如果想在客户端即网页中通过 js 去设置secure类型的 cookie，必须保证网页是https协议的。在http协议的网页中是无法设置secure类型cookie的（不了解，可以去学习一下http和https的区别）。

这个选项用来设置cookie是否能通过 js 去访问。默认情况下，cookie不会带httpOnly选项(即为空)，所以默认情况下，客户端是可以通过js代码去访问（包括读取、修改、删除等）这个cookie的。当cookie带httpOnly选项时，客户端则无法通过js代码去访问（包括读取、修改、删除等）这个cookie。

你可以通过这里去学习更多的关于cookie的知识

创建cookie

this.setCookie('username', 'justin')
 // 设置过期时间为30天
 setCookie(name, value) { 
   let Days = 30; 
   let exp = new Date(); 
   exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000); 
   document.cookie = name + '=' + escape(value) + ';expires=' + exp.toGMTString(); 
 },

读取cookie

let partnerId = this.getCookie('username')
getCookie(name) { 
  let arr,
    reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)');
  arr = document.cookie.match(reg)
  if (arr) {
    if (arr.length) {
      return unescape(arr[2]); 
    } else {
      return null; 
    }
  } else {
    return null;
  }
},

我这里用localStorage示范

<?php
namespace app\index\controller;
class Index extends Base{
    public funtion index(){
        $list=array(
            'name'=>'jachin',
            'age'=>18,
            'sex'=>'男',
        )
        $this->assign('list',$list);
        return $this->display('index');
    }
}

index.html

<script type="text/javascript">
    var arr='<?php echo json_encode($list); ?>';//为啥这里不用转换为json格式，因为这里传输过来的数据本来就是json格式

    localStorage.setItem('name',arr);

</script>

b.js

<script type="text/javascript">
        var nav=localStorage.getItem('name');
        var navv=JSON.parse(nav);
        
    </script>

这样就可以在b.js中使用了

jachinFang

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
TP框架中assign方法传输过来的数组如何放到js中使用

php语言js语言数组需要将其转换为json格式，然后通过js解析json，将json格式转换为数组，才可以打印<script type="text/javascript">var arr='<?php echo json_encode($nav) ?>';var nav=JSON.parse(arr);console.log(nav);&...
复制链接

扫一扫