HTML5 로컬 저장소 웹 저장소
- 不言원래의
- 2018-06-14 10:07:401735검색
이 글에서는 주로 HTML5 로컬 저장소의 웹 저장소 관련 정보를 자세히 소개합니다. 웹 저장소가 JSON을 사용하여 여러 데이터를 저장하는 방법에 대해 관심 있는 친구들이 참고할 수 있습니다.
HTML5가 등장하기 전에 개발자가 소량의 데이터를 저장해야 하는 경우 클라이언트의 데이터는 쿠키를 통해서만 얻을 수 있지만 쿠키에는 몇 가지 단점이 있습니다.
•각 도메인 이름 아래의 쿠키 크기는 4KB로 제한됩니다.
•쿠키는 모든 http 요청에 포함되므로 중복된 데이터가 전송될 수 있습니다.
•쿠키는 네트워크 전송 중에 암호화되지 않으므로 보안 위험이 있습니다.
HTML5에는 새로운 웹 저장 기능이 추가되었습니다. 웹 저장 공간은 공식적으로 각 웹사이트당 5MB를 권장합니다. 쿠키보다 더 많은 데이터를 저장할 수 있고, 쿠키보다 더 강력한 기능을 가지고 있습니다. 이제 Firefox, Opera, Chrome, Safari 등 주요 브라우저에서 웹 스토리지를 지원합니다.
웹 저장소 소개
웹 저장소는 세션 저장소와 로컬 저장소로 구분됩니다.
세션 저장소: 세션과 유사하게 세션 저장소에 저장되는 데이터 수명은 세션 기간과 동일합니다. 사용자의 세션이 종료되면 세션 저장소에 저장된 데이터는 사라집니다.
로컬 저장소: 로컬 저장소에 저장된 데이터는 항상 로컬이며, 사용자나 프로그램이 명시적으로 알지 않는 한 데이터는 일관되게 존재하게 됩니다.
window 개체는 각각 세션 저장소와 로컬 저장소를 나타내는 두 가지 속성, sessionStorage와 localStorage를 제공합니다. 이 두 가지의 기능과 사용법은 저장하는 데이터의 수명이 다르다는 점을 제외하면 거의 동일합니다. Storage는 다음과 같은 속성과 메서드를 제공합니다(예: localStorage):
•localStorage.length: 키-값 쌍의 수를 가져옵니다.
•localStorage.key(index): 인덱스 인덱스의 키를 가져옵니다. localStorage.getItem(key): 지정된 키에 해당하는 값을 가져옵니다.
•localStorage.setItem(key, value): 지정된 키-값 쌍을 저장합니다.
•localStorage.removeItem(key): 키-값 쌍을 삭제합니다. 지정된 키에 해당합니다.
•localStorage.clear(): 모든 키-값 쌍을 삭제합니다.
키와 값 모두 문자열이어야 한다는 점에 유의하세요. 즉, 웹 스토리지 API는 문자열에서만 작동할 수 있습니다. 그런 다음 문자열이 아닌 일부 데이터의 경우 JSON 및 기타 방법을 통해 문자열 형식으로 변환한 후 작업할 수 있습니다.
웹 스토리지는 JSON을 사용하여 여러 데이터를 저장합니다.
작은 프로그램을 사용하여 관련 속성 및 메서드의 기본 사용법을 익힙니다. •학생의 기본 정보(학생 번호, 이름, 학년, 성별 포함)를 입력합니다. ), 학생 번호를 키 값으로 사용하여 로컬 저장소에 저장합니다. • 학생 번호를 통해 학생의 기본 정보를 쿼리합니다.
• 모든 학생의 정보를 표시합니다.
먼저 HTML 페이지를 디자인합니다.
JS를 통해 학생 구현 정보는 로컬 저장소에 저장됩니다. 분석을 통해 저장해야 하는 학생 정보에 여러 필드가 포함되어 있음을 확인했습니다. 이때 JSON의 stringify() 메서드를 사용하여 변환할 수 있습니다. 복잡한 객체를 문자열로 변환하여 웹 저장소에 저장합니다. 웹 저장소에서 읽을 때 JSON 구문 분석() 메서드를 통해 JSON 객체로 변환할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML本地存储之web storage</title>
<style type="text/css">
#content{
border: 1px solid #3D19DD;
width:600px;
text-align:center;
padding: 10px 0;
margin: 0 auto;
}
#content input{
margin-top: 10px;
}
</style>
</head>
<body>
<p id="content">
<label for="user_num">学号：</label>
<input type="text" id="user_num" name="user_num" />
<br/>
<label for="user_name">姓名：</label>
<input type="text" id="user_name" name="user_name" />
<br/>
<label for="grade">年级：</label>
<input type="text" id="grade" name="grade"/>
<br/>
<label for="sex">性别：</label>
<input type="text" id="sex" name="sex"/>
<br/>
<input type="button" onclick="save()" value="添加名单"/>
<hr/>
<label for="search_num">输入学号：</label>
<input type="text" id="search_num" name="search_num"/>
<input type="button" onclick="find()" value="查找学生信息"/>
<p id="find_result"><br/></p>
<hr/>
<input type="button" onclick="show()" value="显示所有">
<p id="list">
</p>
</p>
<br />
</body>
</html> 우리는 세 가지 학생 정보를 localStorage에 저장하고 localStorage에 정보 저장:
JS 사용 학생번호로 학생정보를 검색할 때, 꺼내오는 값이 JSON 문자열이므로, 이를 JSON 객체로 변환해야 한다는 점에 주의해야 합니다. JSON 구문 분석() 메소드는 다음과 같습니다. 
function save(){
var user_num = document.getElementById("user_num").value;
var user_nameElement = document.getElementById("user_name").value;
var gradeElement = document.getElementById("grade").value;
var sexElement = document.getElementById("sex").value;
var msg = {
user_name: user_nameElement,
grade: gradeElement,
sex: sexElement,
};
localStorage.setItem(user_num,JSON.stringify(msg));
} 마찬가지로 모든 학생 정보를 표시할 때에도 추출된 값 문자열을 JSON 객체로 변환해야 합니다. function find(){
var user_num = document.getElementById("search_num").value;
var str = localStorage.getItem(user_num);
var msg = JSON.parse(str);
var find_result = document.getElementById("find_result");
find_result.innerHTML = "学号为："+user_num+"的基本信息： 姓名："+msg.user_name + "，年级：" + msg.grade+",性别："+msg.sex;
} 최종 렌더링은 다음과 같습니다.
사진을 저장하는 웹 저장소
앞서 언급했듯이 로컬 저장소는 문자열 액세스만 지원하므로 우리가 해야 할 일은 이미지를 데이터 URI로 변환하는 것뿐입니다. 이를 달성하는 한 가지 방법은 캔버스 요소를 사용하여 이미지를 로드하는 것입니다. 그런 다음 캔버스에서 이미지를 데이터 URI로 읽을 수 있습니다. 이미지를 저장하는 함수는 다음과 같습니다:
function show(){
var list = document.getElementById("list");
if(localStorage.length>0){
var result = "<table border='1' style='width:300px; margin:0 auto;'>";
result += "<tr><td>学号</td><td>姓名</td><td>年级</td><td>性别</td></tr>";
for(var i=0;i<localStorage.length;i++){
var user_num = localStorage.key(i);
var str = localStorage.getItem(user_num);
var msg = JSON.parse(str);
result += "<tr><td>"+user_num+"</td><td>"+msg.user_name+"</td><td>"+msg.grade+"</td><td>"+msg.sex+"</td></tr>";
}
result += "</table>";
list.innerHTML = result;
}else{
list.innerHTML = "当前还没有数据";
}
}이 함수는 두 개의 매개변수를 받습니다. 하나는 키 값이고 다른 하나는 setImg("img1", "1.jpg") 로컬 저장소의 저장 상태 확인:
얻어 표시되는 코드 함수는 다음과 같습니다. 
function setImg(key,src){
var img = document.createElement('img');
//当图片加载完成的时候触发回调函数
img.addEventListener("load",function(){
var imgCanvas = document.createElement("canvas"),
imgContext = imgCanvas.getContext("2d");
//确保canvas元素大小和图片的尺寸一致
imgCanvas.width = this.width;
imgCanvas.height = this.height;
//渲染图片到canvas中
imgContext.drawImage(this,0,0,this.width,this.height);
//用data url的形式取出
img.crossOrigin = "*"; //防止跨域取照片出错
var imgAsDataURL = imgCanvas.toDataURL("image/png");
//保存到本地存储中
try{
localStorage.setItem(key, imgAsDataURL);
}
catch(e){
alert("保存失败！请重试。。。");
}
}, false);
img.src = src;
}이 함수는 하나의 매개변수만 받습니다. 이미지의 키 값을 찾아야 합니다. :
위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!
관련 권장 사항:
위 내용은 HTML5 로컬 저장소 웹 저장소의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!