本地存储

1、本地存储

• sessionStorage

  • 用于本地存储一个会话中的数据，并且这些数据只有在当前会话页面中才能访问；
  • 会话结束，数据会被清除；
  • 不会自动把数据发给服务器，只会在本地存储；
  • 刷新页面的时候，数据不会被清除；

• localStorage

  • 用于持久化的本地存储，除非用户手动删除，否则不会过期；
  • 可以跨页面访问；
  • 存储大小不超过5M；
  • 不会自动把数据发给服务器，只会在本地存储；
  • 在所有同源窗口中都是共享的；
  • 在浏览器的隐私模式下面是不可读取的；
  • 本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡；
  • 不能被爬虫抓取到；

• cookie

  • 持久化本地存储，时间不过期，数据会一直保存在浏览器本地；
  • 大小限制4k，否则会被截掉;
  • 每次发送http请求时都会携带在http请求头中，可以在客户端和服务器之间来回携带，影响带宽；
  • 在所有同源窗口中都是共享的；
  • 会带来安全性问题：拿到cookie就可以取得所有session信息，无需解密，既可达到目的；
  • 通常由后端设置，由response流发送给客户端并且设置过期时间。前端也可以设置。

• 设置localStorage(sessionStorage使用方法一样):

 - 写入字段：
     window.localStorage['a'] = 1
     window.localStorage.a = 1 
     window.localStorage.setItem('a',1)
- 读取字段
     window.localStorage.a
     window.localStorage['a']
     window.localStorage.getItem('a')
- 删除对应键值
     localStorage.removeItem('mydata')
- 删除所有数据
     localStorage.clear()

• 设置cookie：

- 获取cookie
function getCookie(name){
   var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
   if(arr=document.cookie.match(reg)){
     return unescape(arr[2]);
   }else{
     return null;
   }
}