Web project storage and application

1. Web project storage

Required storage in the Web project:

Server storage:
　　database: storage project core data
　　session technology: storage of current user information

Client storage:
　　Cookie storage: The size is limited to 4kb. Upon request, the server returns a cookieID stored in the browser cache, which occupies broadband. The browser general
　　IE6 limits 20 cookies per domain name.
　　UserData is a special feature of IE 59. There are fewer people, and the most used flash local storage is 25 times the space of cookies.
　　Google Gears is eliminated : There is no limit to the storage size, but additional plug-ins need to be installed.
　　IndexedDB technology: The client directly stores objects. Currently It is not the standard of HTML, and there is no limit to the size of
　　HTML5 Webstroage technology: simple to use, the size cannot exceed 8mb

Web session: The client browser starts from connecting to a certain web server, a series of response processes, until the client closes the browser, the session ends

The storage method required in the Web project: storage in the form of key-value, KV pair, key-value pair

sessionStroage session-level storage data storage will only disappear in the current session, close the browser and the data disappears
　　SessionStroage.length View the number of currently stored data
　　SessionStroage ['key'] = 'value' Store a data
　　var a = SessionStroage ['key' ] Read a
　　piece of data SessionStroage.getItem ('key') Read a
　　piece of data SessionStroage.setItem ('key', 'value') Store a
　　piece of data SessionStroage.removeItem ('key') Delete the specified data
　　SessionStroage.clear () Delete all data

localStorage Cross-session storage browser close data still exists
　　localStorage.length View the number of currently stored data
　　localStorage ['key'] = 'value' Store a data
　　var a = localStorage ['key'] Read a data
　　localStorage. getItem ('key') read a data
　　localStorage.setItem ('key', 'value') store a data
　　localStorage.removeItem ('key') delete the specified data
　　localStorage.clear () delete all data

Second, the storage application-message board

	<body>
		<div>
			<textarea id="texta" cols="30" rows="10"></textarea>
		</div>
		<div>
			<input type="button" value="发表" onclick="fun()" />
			<input type="button" value="清除" onclick="fun1()" />
		</div>
		<div id="dcon"></div>
		<script>
			if(localStorage.getItem("k_con")!=null){
				document.getElementById("dcon").innerHTML = localStorage.getItem("k_con");
			}
			function fun(){
				var texta = document.getElementById("texta").value;
				var dcon = document.getElementById("dcon");
				dcon.innerHTML += `<div>${texta}</div>`;
				document.getElementById("texta").value = '';
				localStorage.setItem("k_con",dcon.innerHTML)
			}
			function fun1(){
				localStorage.clear()
				document.getElementById("dcon").innerHTML = ''
			}
		</script>
	</body>

3. Storage application-login information storage

	/* login.html 页面 */
    <body>
        <script>
			//如果用户已存在，则无需看到此页面
			var n = sessionStorage['LoginName'];
			if(n){
				location.href = "02index.html";
			}
		</script>
		
		<h3>用户登录</h3>
		用户名：<input type="text" id="uname" />
		密码：<input type="password" id="upwd" />
		<input type="submit" id="btnsubmit" value="提交" />
		
		<script>
			var btnsubmit = document.getElementById("btnsubmit");
			btnsubmit.onclick = function(){
				alert("登录成功");
				var uname = document.getElementById("uname").value;
				sessionStorage['LoginName'] = uname;
				setTimeout(function(){
					location.href = "02index.html";
				},3000)
			}
		</script>
	</body>
	
	/* login.html 页面 */
	<body>
		<h3>退出登录</h3>
		<p>退出登录成功！3秒钟之后返回首页。。。</p>
		<script>
		//清除用户信息
			sessionStorage.removeItem('LoginName');
			setTimeout(function(){
				location.href ="02index.html";
			},3000)
		</script>
	</body>

codingScript

Published 40 original articles · praised 31 · visits 2781

Private letter concerns

Web project storage and application

1. Web project storage

Required storage in the Web project:

The storage method required in the Web project: storage in the form of key-value, KV pair, key-value pair

Second, the storage application-message board

3. Storage application-login information storage

Guess you like