localstorage 与sessionstorage的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>storage的使用</title>
</head>
<body>
<pre>
<h1>storage的使用:localstorage 、sessionstorage</h1>
localStorage:是为了解决cookie存储空间不足来解决的,一般浏览器存储空间大小为5M,在各个浏览器中可能不同
localStorage的优势:
1.突破了cookie 4k的限制,
2. localStorage可以将第一次请求的数据存储到本地,这个5K存储在本地相当于本地的一个数据库,相比cookie可以节约存储
localStorage的缺点:
1.浏览器支持性不好,只有高版本浏览器支持
2.localStorage会把本地存储的所有的数据都转换为string型
3.localStorage在浏览器的隐藏模式是不显示的
4.localStorage存储过多容易消耗空间
5.localstorage 不会被爬虫抓到
localStorage 与sessionstorage的区别:
localStorage能永久本地化存储,sessionstorage会在会话结束消失。
localStorage的增删改查
~~~JavaScript
//增:
localStorage['username'] = 'ghost'
localStorage['passworld'] = 1223123,
localStorage.tel = 138888888888,
localStorage.setItem('email', 'ghostdot@163.com')
// 删:
localStorage.clear() //删除所有内容
// 改:
localStorage['username'] = 'ghost1'
localStorage['passworld'] = 91223123,
localStorage.tel = 138111111111118,
localStorage.setItem('email', 'ghostdot@163.com')
//查:
localStorage['username']
localStorage['passworld']
localStorage.tel
localStorage.getItem('username')
~~~
localStorage 的注意事项:
1.一般情况下我们会将json传入到localStorage中,但是localStorage存储的String对象,这时候就需要通过JSON.Stringfy这个方法来实现
2.将Json字符串转换为json对象,通过JSON.Parse
</pre>
<script>
console.log(localStorage)
console.log(sessionStorage)
localStorage['username'] = 'ghost'
localStorage['passworld'] = 1223123,
localStorage.tel = 138888888888,
localStorage.setItem('email', 'ghostdot@163.com')
console.log(localStorage.username)
console.log(typeof(localStorage.passworld))
localStorage.removeItem('username')
localStorage.getItem('username')
for(var i=0;i<localStorage.length;i++){
var key=localStorage.key(i);
console.log(key);
}
var data = {
car:'BMW',
color:"red",
wheel: 4,
seat:8
}
var j = JSON.stringify(data)
console.log(j)
localStorage.setItem('data', j)
var mydataString = localStorage.getItem('data')
console.log("data:"+mydataString)
var mydata = JSON.parse(mydataString)
console.log(mydata)
</script>
</body>
</html>