웹스토리지 상세 소개 [html5의 로컬 데이터 처리]
- 黄舟원래의
- 2017-03-14 15:51:031482검색
다음 편집기는 웹 스토리지[html5 로컬 데이터 처리]에 대한 심층 분석을 제공합니다. 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리고자 합니다. 에디터와 함께 구경하러 오세요. 모두 즐거운 게임 되시길 바랍니다
1. webStorage란 무엇인가요?
webStorage는 html5에서 지역화된 저장 방식입니다. 이전에는 쿠키;
저장 방식을 사용했습니다. 2. 그들 사이의 차이점은 무엇입니까?
Ⅰ. 쿠키 문제:
ⅰ. 쿠키는 서버에 요청을 보내야 하며, 서버는 브라우저에 저장된 cookieId를 반환합니다. 🎜> 캐시에는 일정량의 대역폭이 필요합니다. [쿠키는 각 HTTP 요청의 헤더 정보와 함께 전송되며 이로 인해 네트워크 트래픽이 눈에 띄게 증가합니다];
ⅱ. 쿠키에 의해 저장되는 데이터 용량은 제한되어 있으며 IE6에서만 저장할 수 있습니다. 약 2K;II. 그리고 웹 스토리지는 데이터를 로컬에만 저장하면 됩니다.3. 설명을 위해 간단한 예를 들 수 있습니다.
예: 사용자 이름과 비밀번호를 입력하고버튼을 클릭하세요. 1 데이터를 저장하고, 버튼 2를 클릭하고 페이지를 새로 고쳐서 가져옵니다.
과정: ⅰ.JavaScript 코드클립보드에 콘텐츠 복사
XML/HTML Code复制内容到剪贴板
function MyClick1()
{
}
- ⅲ. ID를 통해 비밀번호를 받으세요
클립보드에 콘텐츠 복사var username = $("#TxtUserName").val();
- ⅳ. 사용자 이름과 비밀번호를 얻은 후 데이터를 저장하는 방법은 무엇입니까? 두 가지 방법이 있습니다:
①. 첫 번째 방법:
Storege, Firefox2+의 Firefox 브라우저에서 사용;
라이프사이클: 이렇게 저장된 데이터는 창 수준에서만 유효하며, 동일한 창(또는 탭) 페이지를 새로 고치거나 점프할 때 로컬에 저장된 데이터를 새로 얻을 수 있습니다. 창이나 페이지를 열면 원본 데이터가 무효화됩니다. [현재 페이지만 해당]단점: IE는 이를 지원하지 않으며 지속적인 데이터 저장을 달성할 수 없습니다.
클립보드에 콘텐츠 복사
var pwd = $("#TxtPwd").val();- 참고: sessionStorage.setItem은 키-값 쌍으로 저장됩니다.
이는 웹 저장소 인터넷 저장소 사양의 일부이며 이제 Firefox 3.5, Safari 4 및 IE8에서 지원됩니다.
수명주기: 로컬 C 드라이브에 저장되며 브라우저를 닫았다가 연 후에도 그대로 유지됩니다. ![웹스토리지 상세 소개 [html5의 로컬 데이터 처리]](http://files.jb51.net/file_images/article/201607/201607110947377.png)
아아아앙
ⅴ.인쇄
아아앙
ⅵ. 버튼 2는 위의 모든 데이터를 인쇄합니다 첫 번째 인쇄 방법:
sessionStorage.setItem( "k_username" , username); sessionStorage.setItem( "k_pwd" , pwd);
-
두 번째 인쇄 방법JavaScript Code复制内容到剪贴板 localStorage.setItem("k_username", username); localStorage.setItem("k_pwd",pwd);
결과는 다음과 같습니다.
JavaScript Code复制内容到剪贴板
alert("保存成功！");JavaScript Code复制内容到剪贴板
function MyClick2() {
alert(sessionStorage.getItem("k_username"));
alert(sessionStorage.getItem("k_pwd"));
}로컬 데이터 추적:
![웹스토리지 상세 소개 [html5의 로컬 데이터 처리]](http://files.jb51.net/file_images/article/201607/201607110947378.png)
결과 표시: ![웹스토리지 상세 소개 [html5의 로컬 데이터 처리]](http://files.jb51.net/file_images/article/201607/201607110947379.png)
![웹스토리지 상세 소개 [html5의 로컬 데이터 처리]](http://files.jb51.net/file_images/article/201607/2016071109473711.png)
![웹스토리지 상세 소개 [html5의 로컬 데이터 처리]](http://files.jb51.net/file_images/article/201607/2016071109473712.png)
ⅷ.localStorage的clear方法
//如果我想把所有数据都清除？localStorage有个方法
localStorage.clear();
结果显示:
![웹스토리지 상세 소개 [html5의 로컬 데이터 처리]](http://files.jb51.net/file_images/article/201607/2016071109473713.png)
![웹스토리지 상세 소개 [html5의 로컬 데이터 처리]](http://files.jb51.net/file_images/article/201607/2016071109473714.png)
代码显示：
XML/HTML Code复制内容到剪贴板
| 用户名: | |
| 密码: | |
4.webStorage制作简易留言板[代码为了展示效果所以把js就直接在html里面写]
XML/HTML Code复制内容到剪贴板
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(function () {
//4.页面刷新之后判断它是否为空？
if (localStorage.getItem("k_showCon") != null) {
//5.存在，就把获取到的内容存到里面去
"k_showCon", $("#showCon").html(localStorage.getItem("k_showCon"));
}
});
function preservationClick()
{
var sCon = $("#mCon").val();
//2.获取到内容之后加到显示p里去？怎么放呢？这里我们用append方法
$("#showCon").append("<p>" + sCon + "</p>");
//3.预期的是刷新之后留言还在
localStorage.setItem("k_showCon", $("#showCon").html());
}
function ClearClick()
{
//6.获取到显示p里面的内容清除
$("#showCon").html("");
localStorage.clear();
}
</script>
</head>
<body>
<p>
<table>
<tr>
<td colspan="2">
<textarea id="mCon" cols="25" rows="10"></textarea>
</td>
</tr>
<tr>
<td><input type="button" value="留言" onclick="preservationClick()" /></td>
<td><input type="button" value="清除" onclick="ClearClick()" /></td>
</tr>
</table>
<p id="showCon"></p>
</p>
</body>
</html>
效果显示:
![웹스토리지 상세 소개 [html5의 로컬 데이터 처리]](http://files.jb51.net/file_images/article/201607/2016071109473717.png)
![웹스토리지 상세 소개 [html5의 로컬 데이터 처리]](http://files.jb51.net/file_images/article/201607/2016071109473718.png)
위 내용은 웹스토리지 상세 소개 [html5의 로컬 데이터 처리]의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!