标签：之间 html 哈哈 影响 控制 设置 刷新数据 获取数据 fun
什么时候会用到本地存储？本地存储的作用？
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)
});
练习题
比如 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>
标签：之间 html 哈哈 影响 控制 设置 刷新数据 获取数据 fun
原文地址：https://www.cnblogs.com/jianjie/p/13347661.html
