本地存储

本地存储主要分为一个永久存储 localstorage和会话存储 sesstionStorage
应用场景
记住用户信息，记住阅读历史

他们两个和cookie的区别

区别	sesstionStorage	localstorage	cookie
存储量	5M(具体看浏览器版本)	5M(具体看浏览器版本)	4KB
存放地点	浏览器	浏览器	浏览器
发送http请求时	不会带上	不会带上	会带上
生命周期	浏览器关闭后不存在	永久保留（*）	过期日期
访问权限	同源网站	同源网站	同源网站

sessionStorage

• 打开浏览器到关闭浏览器的过程叫做会话
• 生命周期---关闭浏览器就不存在了
• sessionStorage与以前服务器等session没有关系
• 限制只能在同源网站中使用 比如：百度--数据 在谷歌中不可以获取
• 可以跨页面使用
• 发送HTTP请求的时候，不会带上

localStorage

• 浏览器关闭之后还存在，除非手动删除否则一直存在在浏览器里面
• 可以在同源网站中跨页面使用
• 容量也是5M到20M 具体要看浏览器版本
• 发送HTTP请求的时候 不会自动跟上请求

公共语法（二者皆可使用）

• setItems(key,val) 存入
       以键值对的方式存放在浏览器中，可以在谷歌浏览器中的application中进行查看

 localStorage.setItem("movie","三毛流浪记");

• getItem(key)获取

 var val=localStorage.getItem("movie")//  三毛流浪记

• removeItem(key);删除

 // 删除
localStorage.removeItem("movie")  
  // 获取
  var val=localStorage.getItem("movie")//  为 undefined

• clear()清空，清空整个本地存储

// 清空 
  localStorage.clear();

重点注意

• 当存入数据时，浏览器都会先调用数据的toString()方法
• 不管存入的是什么类型的数据，都会变成字符串类型

// 存入 bool 
  localStorage.setItem("test",true);
  var test=localStorage.getItem("test");
  console.log(typeof test);// string 类型

• 当存入复杂类型(数组，对象)时，先转成json字符串，再存入，否则数据丢失
  使用JSON.stringify将对象转为json字符串

 // 复杂类型
  var obj={name:"小朱"}
  // 将对象转为json格式
  var jsonObj=JSON.stringify(obj);
  // 存入
localStorage.setItem("test",jsonObj)
  // 类型是字符串
  console.log(typeof localStorage.getItem("test"));// string
  // 数据成功存入 
console.log(localStorage.getItem("test"));// {"name":"小朱"}

重新获取数据的时候使用JSON.parse将json字符串转为对象或数组

var obj={name:"小朱"}
  // 将对象转为json格式
  var jsonObj=JSON.stringify(obj);
  localStorage.setItem("test",jsonObj)
  // 取出数据
  var newJson=localStorage.getItem("test");
  // json转为对象
 var newObj=JSON.parse(newJson);
 console.log(typeof newObj);// object 类型