layout: post
title: javascript权威指南-第二十章
date: 2017-09-07 14:36:27
tags: 读书笔记
概述
二十章讲的是客户端存储，很详细的介绍了常见的几种客户端存储的方式。涉及到一些同源策略的东西，所以就想看一下13章的安全性的问题。也记录一下
安全性
同源策略：脚本不能读取不同服务器载入的文档内容。比如说一个页面的脚本不能监听其他页面的用户输入信息，这就是同源策略。这么来看同源策略是必须的，不然浏览一个网页，所有的其他页面的信息都暴露了。
但是确实有场景需要读取其他页面的属性，可以使用document的domain属性，domain默认是载入文档的主机名，可以人为设置，比如home.example.com可以设置成example.com。不能设置成home.example或者ample.com之类的，也必须有一个.（避免出现com的情况）如果2个窗口的domain一致，就没有同源限制啦。
跨域资源共享：origin，请求头设置Access-Control-Allow-Origin
XSS(粗略了讲了一点安全问题)
对于url:http://www.example.com/greet.html?David
let name = decodeURIComponent(window.location.search.substring(1)) // search可以拿到？之后的字段（可以理解为query字段？？？），转码之后可以拿到David
alert(name)
但是如果调用http://http.www.example.com/greet.html?name=%3Cscript src=siteB/evil.js%3E%3C/script%3E
这样会注入一个来自siteB的脚本，脚本在sideB中，但是可以在A中进行操作，比较危险
防止XSS的，通过不可信的数据来的时候，去掉里面的HTML标签（包括script标签）,
简单的实现安全函数
name = name.replace(/</g, '<').replace(/</g,'>')
localStorage和sessionStorage的区别
两者的区别在于存储的有效期和作用域不同，也就是可以存储多长时间以及谁对数据有访问权。
storage都定义了存储、获取、删除的方法
有效期和作用域
localStorage的作用域是文档源级别。文档源就是协议主机和端口一致，也就是说同一个浏览器开多个窗口打开一个页面，是可以共享localStorage的。但是受浏览器供应商的限制。
sessionStorage的作用域也是文档源级别，但是不太相同，它是限定在窗口中的。在不同的标签中不共享。
sessionStorage在浏览器或者标签页关闭，sessionStorage里面存的数据会被删除。
存储的API
localStorage.setItem('x', 1)
localStorage.getItem('X')
/// 遍历
for(let i= 0; i< localStorage.length; i++ ){
let name = localStorage.key(i)
let value = localStorage.getItem(name)
}
localStorage.removeItem('X') //删除X项
localStorage.clear() //全部删除
cookie
cookie属性：有效期和作用域
cookie的默认有效期是浏览器的会话期间。但是和sessionStorage有区别，cookie不局限在浏览器单个窗口，有效期和整个浏览器的进程有关。
通过max-age设置有效期设置有效期，他的作用域可以通过path和domain来配置，默认情况和创建他的web页面有关，对子页面可见。
如果路径设置成'/'就和localStorage一样的作用域了
保存cookie
// cookie中不允许包含分毫、逗号和空白符，所以一般采用encodeURIComponent转码
// 最简单的cookie设置，浏览器关闭清除
document.cookie = 'version=' + encodeURIComponent(document.lastModified)
// 一个可选max-age、path、domain、secure属性的方法
// 通过设置domain可以解决cookie跨域的问题
const setCookie = (name, value, daysTolive, path, path) = {
let cookie = `${name}=${encodeURLComponent(value)}`
if(typeOf daysToLive === 'number'){
cookie += `; max-age=${daysToLive * 60 * 60 * 24}`
}
if(path){
cookie += `; path=${path}`
}
if(domain){
cookie += `; domain=${domain}`
}
document.cookie = cookie
}
读取cookie
通过document.cookie读取出来的是一个字符串，不同键值对通过f分号和空格隔开。value的解码方式取决于之前存储用的方式，例如上面用到的setCookie中用的方式是encodeURIComponent编码
const getCookie = (){
let cookieObj = {}
let cookieStr = document.cookie
if(cookieStr === ''){
return cookieObj
}
let cookieArr = cookieStr.split('; ')
for(let _cookie of cookieArr){
let p = _cookie.indexOf('=')
let name = _cookie.slice(0,p)
let value = _cookie.slice(p+1)
value = decodeURIComponent(value)
cookieObj[name] = value
}
return cookieObj
}
cookie相关的存储
实现类似于sessionStorage的getItem、setItem、remove、delete等功能
const cookieStorage(maxage, path) {
//自执行函数实例化一个cookie对象
let cookie = (()=>{
let cookieObj = {}
let cookieStr = document.cookie
if(cookieStr === ''){
return cookieObj
}
let cookieArr = cookieStr.split('; ')
for(let _cookie of cookieArr){
let p = _cookie.indexOf('=')
let name = _cookie.slice(0,p)
let value = _cookie.slice(p+1)
value = decodeURIComponent(value)
cookieObj[name] = value
}
return cookieObj
}())
// 拿出所有的key
let keys = Object.keys(cookie)
//存储API公共的属性和方法
this.length = keys.length
//返回第n个key的名字，即key方法
this.key = (n) => {
if (n<0 || n >= keys.length) return null
return keys[n]
}
//getItem方法
this.getItem = (name) => cookie[name] || null
// setItem方法
this.setItem = (key,value) => {
//首先判断要存储的cookie存在不,不存在先操作一次keys和length
if(!(key in keys)){
keys.push(key)
this.length++
}
// 针对cookie对象做的操作
cookie[key] = value
//接下来就是正式操作浏览器中的cookie
let domCookie = `${key}=${encodeURIComponent(value)}`
if(maxage) domCookie += `; max-age=${maxage}`
if(path) domCookie += `; path=${path}`
document.cookie = domCookie
}
// removeCookie
this.removeItem = (key) => {
if(!(key in cookie)) return
delete cookie[key]
this.length--
let p = keys.indexOf(key)
keys.splice(p,1)
document.cookie =
}
// clear
this.clear = () => {
for(let key of keys){
document.cookie = `${key}=; max-age=0`
}
cookie = {}
keys = []
this.length = 0
}
}
