localStorage是什么
localStorage也是一种浏览器储存数据的方式（本地储存），他只是存储在本地，不会发送到客户端
单个域名下的localStorage总大小有限制
localStorage作为HTML5 Web Storage的API之一，主要作用是本地存储。
本地存储是指将数据按照键值对的方式保存在客户端计算机中，直到用户或者脚本主动清除数据，否则该数据会一直存在。也就是说，使用了本地存储的数据将被持久化。
localStorage的优势在于拓展了cookie的4KB限制，并且可以将第一次请求的数据直接存储到本地，这相当于一个5MB大小针对于前端页面的数据库。相比于cookie，localStorage可以节约带宽，但是这项功能需要高版本的浏览器来支持。
localStorage在使用中也有一些局限：
(1)浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性。
(2)目前所有的浏览器中都会把localStorage的值类型限定为String类型，对于日常比较常见的JSON对象类型需要做一些转换。
(3)localStorage在浏览器的隐私模式下是不可读取的。
(4)localStorage本质上是对字符串的读取，如果存储的内容多会消耗内存空间，导致页面下载变慢。
(5)localStorage不能被网络爬虫抓取到。
在浏览器中操作localStorage
localStorage的基本用法
<form id="login" action="http://www.imooc.com"method="post"> <input type="text" name="username"> <input type="password" name="password"> <input type="submit" id="btn" value="登录"> </form> <script> //使用localStorage实现自动填充 const loginForm = document.getElementById('login'); const btn = document.getElementById('btn'); const username = localStorage.getItem('usernaem'); if (username){ loginForm.username.value = username; } btn.addEventListener( 'click', ev => { e.preventDefault(); //数据验证 //console.log(loginForm.username.value); localStorage.setItem('username',loginForm.username.value); loginForm.submit(); }, false); </script>
1localStorage 的存储期限
localStorage是最持久化的本地存储，除非手动清除（比如通过js删除，或者清除浏览器缓存），否则数据是永远不过期的
sessionStorage
当会话结束(比如关闭浏览器)的时候，sessionStorage中的数据会被清空
sessionStorage.setItem('username','alex');
sessionStorage.getItem('username');
sessionStorage.removeItem('username');
sessionStorage.clear();
2.localStorage键和值的类型
localStorage存储的键和值只能是字符串类型
不是字符串类型，也会转化成字符串类型再存进去
localStorage.setItem({},18);
localStorage.setItem('students',[{},{}]);
console.log(typeof localStorage.getItem('[object Object]'),
localStorage.getItem('[object Object]')
);
console.log({}.toString());//将其转换为字符串
3.不同域名下能否共用localStorage
不同的域名是不能使用localStorage的
4.localStorage的兼容性
IE7以下的版本不支持lolocalStorage，IE8开始支持
网址：caniuse.com
小结：
Cookie是浏览器存储的一种方式
存储在用户本地，而不是在服务器上，虽然是存储在本地，但是它可以随着浏览器每次请求发送到服务端
写入：
document.cookie= 'username = alex;max-age=5';
document.cookie= 'get = 18;domain=.imooc.com;max-age=5';
读取：
document.cookie//'username=alex;age=18';
1localStorage 的存储期限
localStorage是最持久化的本地存储，除非手动清除（比如通过js删除，或者清除浏览器缓存），否则数据是永远不过期的
sessionStorage
当会话结束(比如关闭浏览器)的时候，sessionStorage中的数据会被清空
sessionStorage.setItem('username','alex');
sessionStorage.getItem('username');
sessionStorage.removeItem('username');
sessionStorage.clear();
2.localStorage键和值的类型
localStorage存储的键和值只能是字符串类型
不是字符串类型，也会转化成字符串类型再存进去
localStorage.setItem({},18);
localStorage.setItem('students',[{},{}]);
console.log(typeof localStorage.getItem('[object Object]'),
localStorage.getItem('[object Object]')
);
console.log({}.toString());//将其转换为字符串
3.不同域名下能否共用localStorage
不同的域名是不能使用localStorage的
4.localStorage的兼容性
IE7以下的版本不支持lolocalStorage，IE8开始支持
网址：caniuse.com