2014-02-13 2 views
0

나는 Node.js, express, Socket.IO 및 MongoDB를 사용하여 GPS/매핑 앱을 만들고 있습니다. 추적기 페이지는 HTML5 geolocation과 Socket.IO를 사용하여 서버에 코드를 보내고이를 MongoDB에 저장합니다. 사용자가 이전에 기록한 데이터를 볼 수 있도록 사용자 페이지를 만들고 있습니다. 현재 로그인 페이지가 없습니다. 따라서 index.html에서 사용자 이름 목록을 채우고 하나를 선택할 수 있습니다.자바 스크립트를 사용하여 웹 페이지간에 데이터 공유

내 문제는 선택한 사용자의 사용자 이름과 같은 데이터를 다음 페이지로 전달하는 방법이 확실하지 않다는 것입니다. 나는 하나의 사용자 이름을 전달하기 위해 서버에 소켓 연결을 열지 않으려 고 노력했지만 최선의 방법이라면 문제는 없다. 또한 localStorage를 옵션으로 알고 있습니다. 여기 당신에게 내가 일하고 있어요 어떤 아이디어를 제공하는 몇 가지 코드 조각입니다 :

index.html을 :

<html> 
<head> 
    <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
    <script> 
     $(document).ready(function() { 
      $.ajax({ 
       dataType: "json", 
       url: "/getusers" 
      }).done(function(data) { 
       console.log("--->", data); 
       for(var i=1; i<data.length; i++) { 
        $('#list').append("<li><a href=http://localhost:3000/mapPage.html>" + data[i].name + "</a></li>"); 
       } 
       $("a").click(function(e) { 
        alert("--->", $(this).html()); 
        //alert("--->", $(e).html()); 
        //alert("--->", $(e).getVal()); 
        //window.localStorage.setItem("username",) 
       }); 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <ul id='list'> 
    </ul> 
</body> 
</html> 

아약스 그냥 콜렉션에서 MongoDB를 요청 명시 적 경로를 타격 이름 (각 사용자에게는 컬렉션이 있습니다). 또한 클릭 한 특정 앵커 태그에서 데이터를 가져 오는 데 문제가 있습니다. 그래서 나는 클릭 한 사용자 이름을 얻어서 "userpage"로 보내야하는데, 이는 현재 index.html과 거의 동일하므로 특정 사용자 컬렉션을 선택하고 사용할 수있는 객체 목록을 표시합니다. 지도 좌표);

tl; dr : 클릭 한 앵커 태그에서 데이터를 가져 와서 다음 페이지에서 데이터를 사용할 수있게합니다.

+0

단일 페이지 JS 응용 프로그램을 고려해야합니다. 개발 복잡성은 증가하지만 응용 프로그램이 크게 향상됩니다. Angular 또는 Backbone과 같은 것을 조사하십시오. – Sneagan

+0

그것도 생각조차하지 않았어. 고마워. 고마워. –

+0

표현 루트를 작성하는 정확한 방법, 특히 보안 로그인 페이지/시스템을 보여주는 예제 [here] (https://gist.github.com/smebberson/1581536)를 찾았습니다. 내가 가지고 있었던 여러 가지 문제는 표현을 올바르게 사용함으로써 해결되었다. –

답변

2

페이지 사이에 이와 같은 데이터를 전달해야한다면 가장 간단한 방법은 쿼리 문자열로 전달하는 것입니다.

http://localhost:3000/userPage.html?username=jim&user=jdawg149 

그런 다음 대상 페이지에서 변수를 읽을 수 있습니다.

당신은 얻을 여기서 논의로 window에 몇 가지 간단한 방법으로 아주 간단 쿼리 문자열을 설정할 수 있습니다

http://css-tricks.com/snippets/javascript/get-url-and-url-parts-in-javascript/

또한 정규식 함수를 사용하여 좀 더 복잡한 그것으로 얻을 수

여기에 대답으로, URL을 구문 분석 :

How can I get query string values in JavaScript?

당신은 ~ 2000 자 당신의 URL에를 제한해야합니다 유의하십시오.

+0

그건 내 첫 번째 아이디어지만, 일부 googleing 후 나는 "jquery와 함께이 일을하지 말았어야 비슷한 몇 가지 반응을 발견!" 그래서 나는 다른 방향으로 갔다. 어떻게하는지 설명해 주시겠습니까? –

+0

여기에 다른 검색어가 있습니다. "쿼리 문자열"은 위의'? '뒤에 나오는 텍스트입니다.검색 및 양식 제출에 자주 사용됩니다. "jQuery"는 haters 또는 fanboys에 상관없이 사용할 수도 있고 사용하지 않을 수도있는 Javascript 라이브러리입니다. – joeytwiddle

+0

@JakeSellers가 업데이트되었습니다. 다른 사람들은 기술적으로 옳습니다. '올바른'방법은 게시물에 대한 저의 처음 언급에서 언급 한 것처럼 백엔드와 통합되는 단일 페이지 JS 응용 프로그램을 작성하는 것입니다. 그러나 이렇게해야한다면이 방법을 사용할 수 있습니다. – Sneagan

3

정확하게 sessionStorage가 설계된 것입니다. 한 페이지에서 다른 페이지로 데이터를 전달합니다. localStorage도 사용할 수 있지만 세션간에 일부 데이터가 지속되는 경우가 많습니다.

+0

데이터가 해당 사용자에 의해서만 사용되며 저장할 필요가 없다면 서버, localStorage 또는 sessionStorage가 좋습니다. 사용자가 브라우저를 바꿀 때까지 ... ;-) – joeytwiddle

+0

나중에 땜장이와 인터넷 검색을 한 후에 세션 저장소가 갈 길이 멀다고 생각합니다. –

+1

sessionstorage에 직접 작성하려면 다음을 염두에 두십시오. http://stackoverflow.com/questions/9742395/scope-of-sessionstorage-and-localstorage – Sneagan

관련 문제