499 本地存储
Posted jianjie
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了499 本地存储相关的知识，希望对你有一定的参考价值。
-
什么时候会用到本地存储？本地存储的作用？
-
1.记住用户名和密码、或者自动登录
-
2.未登录状态下，加入购物车的信息一般也先存储在本地，当登录后，把信息存储到服务器上（目的是多平台数据共享）
-
3.对于非实时刷新数据，可以从服务器把数据获取到后，临时存储在本地（设置有效时间），在有效时间内页面刷新，不再重新从服务器获取数据，而是读取本地数据；超过有效时间重新从服务器拉取... “前端性能优化的一点”
-
4.还能实现同一个网站不同页面之间的信息共享和通信
-
......
-
本地存储到底存储在哪了？
-
1.本地存储是受浏览器限制的，例如：在谷歌中存储的数据，在IE中获取不到
-
2.受源(域)的限制，例如：都是用谷歌浏览器，我在京东下存储的数据，在百度中是获取不到的
-
本地存储的信息在控制台中可以查看到（而且是明文存储），所以敏感的数据尽可能不要存储在本地，非要存储也要做安全处理（例如：加密）
-
setItem([key],[value])： 存储信息
-
getItem([key])： 获取信息
-
removeItem([key])： 移除某一项信息
-
clear()： 清除所有存储的信息
-
=> 向本地存储的信息都是string字符串格式
-
=> localStorage 是持久化存储在客户端本地的（除非手动清除或者浏览器卸载等，否则一直存储下来，没有过期时间）
-
=> sessionStorage 会话存储（当前页面刷新，存储信息还在，但是只要页面一关闭，所有会话存储的信息都会消失）
-
设置cookie => jquery.cookie.js
-
document.cookie="[key]=[value];..."
$.cookie(‘username‘, ‘哈哈‘);
console.log($.cookie(‘username‘));
$.removecookie(‘username‘);
$.cookie(‘username‘, ‘zhufeng‘, {
expires: new Date(new Date().getTime() + 30 * 24 * 60 * 60 * 1000)
});
- cookie VS localStorage
- 1.大小限制：一般浏览器允许一个源下cookie最多存储8KB，而localStorage被允许存储最大的长度限制是5MB
- 2.兼容性：cookie兼容所有浏览器，而localStorage是H5中新增的，不兼容IE低版本浏览器（IE6~8）
- 3.稳定性：cookie有过期时间，但是一般不等到时间可能就没了（例如：清除浏览器的缓存或者历史信息、安全卫士在清理电脑垃圾等操作时，都有可能会把存储的cookie给清除掉），但是这些操作对localStorage没有影响
- 4.有时候浏览器会开启无痕浏览或者隐私模式，此时无法设置cookie，但是可以设置localStorage的信息
- 5.和服务器端的猫腻：cookie总是会和服务器中的SESSION眉来眼去（客户端和服务器端交互的时候，cookie信息会传来传去），而localStorage不屑于和他们同流合污（localStorage和服务器没有必然的联系，是单纯的本地存储）
- 6.存储时间：cookie有过期时间，而localStorage是持久存储
练习题
比如 http://a.test.com/index.html 页面设置了 sessionStorage
然后页面里有一个链接 < a href="http://a.test.com/about.html" target="_blank">跳转新页面</ a>
点击a链接以后，新开了一个标签页，显示了新页面。那这个新页面有 index 页面的 sessionStorage 吗？如果还有一个按钮
这个按钮有一个事件 window.open(‘http://a.test.com/home.html‘)
然后点击这个按钮，弹出来的这个新窗口home.html，有没有 之前index.html页面设置的sessionStorage 呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>111页面</title>
</head>
<body>
<div id="div">111</div>
<a href="./222.html" target="_blank">电价我</a>
<button id="btn">按钮</button>
</body>
</html>
<script>
window.sessionStorage.setItem(‘a‘, ‘111‘)
btn.onclick = function () {
window.open(‘./home.html‘)
}
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>222页面</title>
</head>
<body>
<h2>哈哈哈哈</h2>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>home页面</title>
</head>
<body>
<h2>home</h2>
</body>
</html>
以上是关于499 本地存储的主要内容，如果未能解决你的问题，请参考以下文章