JavaScript中本地存储数据常用的，且兼容性较好的有两种方式，cookie和Storage。另外还可以使用location.hash临时存储少量关键信息。
一 location.hash
location.hash可以记录当前页面的状态，保存或分享当前页的url，再次打开该url时，网页还是保存（分享）时的状态。
如果要使用location.hash来存储状态数据，那么我们首先应该了解URL的大小限制。
虽然HTTP协议的RFC规范并没有详细规定URL的最大字符长度限制，但实际上，在浏览器或者服务器中总会存在限制的。这里的字符是指ASCII字符。
一般建议浏览器URL最大值：IE 2KB，Chrome 8KB，Firefox 64KB，Safari 72KB，Opera 192KB，注意这只是浏览器端的限制，实际使用还要根据不同的服务器端来做调整，例如apache 一般限制最大为8KB，nginx一般默认4KB等等。两者结合来看，我建议在开发中尽量把大小控制在2KB以内。
location.hash的主要目的并不是为了存储数据，它更重要的功能是可以无刷新修改页面，配合ajax技术实现前端路由，虽然现在使用H5的history API逐渐替代了这种方式，但我们还是可以了解一下它的原理，因为它的兼容性更好。
本篇主要讲解JS的数据存储，关于前端路由以后再详细讲解。
二 document.cookie
1，cookie用于在客户端本地临时保存用户少量信息。
当用户打开一个网址时，浏览器可以把与该网址相关的少量用户信息存储在cookie中，当下一次用户再次打开相同网址时，浏览器会自动把cookie中存储的信息一起发送给服务器，这样服务器就能及时的返回和用户相关的信息。浏览器允许的cookie最大为4KB，不同浏览器同一域名下允许的cookie个数在20到50之间。
2，读取cookie
读取cookie会返回一个字符串，它以键值对的形式保存数据，每条数据用分号隔开。
注意：只能在使用http或者https协议访问网页时才能正确读写cookie，本地使用file协议将无法使用cookie。
1 console.log(document.cookie);//"username=ren;age=12"
另外，每条cookie都有几个可选的键，用来设置/更新它自己，但在cookie中不能被显式的查看到：
path：规定cookie的路径，如果没有设置默认为当前文档的目录。
domain：设置域名，如果没有则默认为当前页面域名。
max-age：以秒来规定cookie的生存周期。可以设置负值使cookie过期。
expires：设置一个时间当做cookie的过期时间。基本可以用max-age替代。
secure：通过设置一个boolean值来规定通过http还是https传输cookie，新的规定是cookie只能通过https传输，所以这个键基本没用了。
3，添加cookie
要添加新的cookie信息很简单，但是这种方式只支持一条一条的写入：
1 document.cookie = "address=cd;max-age=360;path=/";
cookie和普通变量不同，普通变量经过上面的操作，原来的值将被覆盖，而cookie则执行了类似 cookie += “some text”的操作。
4，修改cookie
1 document.cookie = "address=sc;max-age=360;path=/”;
修改时path必须和创建时一致，不然浏览器会新增一条cookie数据。
5，删除cookie
如果要在cookie生存周期内手动的删除cookie，只需要把expires设置为以前的某一个时间或把max-age设置为负值即可：
1 document.cookie = “address=sc;expires=Thu,01 Jan 1970 00:00:00 GMT;path=/”; 2 document.cookie = "name=ren;max-age=-1;path=/";
需要注意的是，路径必须和创建这条cookie的路径一致，不然浏览器不会执行删除操作。
下面是我封装的一个以对象形式返回cookie的函数：
1 function getCookie(cookie){ 2 if(!cookie){ 3 return null; 4 }else{ 5 var cookieArr = cookie.split(";"); 6 var cookieObj = {}; 7 for(let i = 0,len = cookieArr.length;i < len;i++){ 8 cookieArr[i] = cookieArr[i].trim(); 9 var cookieKey = cookieArr[i].split("=")[0];10 var cookieVal = cookieArr[i].split("=")[1];11 cookieObj[cookieKey] = cookieVal;12 }13 return cookieObj;14 }15 }
三 Storage
Storage分为window.localStorage和window.sessionStorage。
1，异同
localStorage是没有时间限制的（除非用户手动清理）数据存储，存储在本地硬盘。而sessionStorage是针对一个 session（会话）的数据存储，网页关闭，数据将丢失，他们存储数据的大小可达5MB。不同浏览器可能存在差异。
2，length
localStorage对象有一个length属性，表示存储了几条数据。
3，添加和修改数据
localStorage是一个对象，所以他的修改方法同普通对象：
1 localStorage.name = "ren";//普通对象方式2 localStorage.setItem("age",12);//localtStorage提供的方法3 console.log(localStorage.name);//"ren"4 console.log(localStorage.getItem(age));//"12" 你可能会奇怪，localstorage.age为什么会返回字符串“12”，那是因为它只支持String类型的数据存储，所以系统在存储时会自动把数据转换成字符串。
4，删除
删除一项
1 localStorage.removeItem(age);2 console.log(localStorage);//{name:age，length：1} 删除全部
1 localStorage.clear();2 console.log(localStorage);//{length:0}