JS

本本本本本地存储

localStorage

作用：可以将数据永久存储在本地（用户电脑），除非手动删除，否则关闭页面也会存在

特性：a.可多窗口（页面）共享（同一浏览器可以共享）b.以键值对的形式存储使用

语法：

存储数据：localStorage.setItem('key', 'value')

获取数据：localStorage.getItem('key')

删除：localStorage.removeItem('key')

本地原来若有数据使用setItem就是修改，原来没有就是增加

sessionStorage

特性：a.生命周期为关闭浏览器窗口  b.在同一个窗口（页面）下数据可以共享  c.以键值对的形式存储  d.用法跟localStorage基本相同

本地存储只能存储字符串类型

存储复杂数据类型

需要将复杂的数据类型转换为JSON字符串，再存储到本地

语法：JSON.stringfy(复杂数据类型)

?? 本地存储里面取来的是字符串，不是对象，无法直接使用

！！把取出来的字符串转换为对象

语法：JSON.parse(JSON字符串)

map和join方法拼接字符串

数组中map方法 迭代数组 map可遍历数组处理数据，并且返回新的数组

例如：

const arr = ['red', 'blue', 'green']

const newArr = arr.map( function(ele) {

         return ele + '颜色'

})

console.log(newArr) // ['red颜色', 'blue颜色', 'green颜色']

map也称为映射，指两个元素的集之间元素相互"对应"的关系         

map重点在于有返回值，forEach没有返回值

数组中join方法：把数组中所有元素转换为一个字符串

const arr = ['red颜色', 'blue颜色', 'green颜色']

console.log(arr.join('')) // red颜色blue颜色green颜色

数组元素是通过参数里面指定的分隔符进行分隔的

参数：空字符串('') --> 则所有元素之间没有任何字符

           括号内为空 --> 则逗号分隔

CSS

旋转

属性：transform：rotate(角度)

旋转单位角度：deg角度 正顺逆负

改变转换原点：默认情况下，转换中心是盒子中心点

属性：transform-orgin: 水平原点位置 垂直原点位置

取值：方位名词(left, top, right, bottom, center) 、px、 %

多重转换

效果就是那个轮胎滚走了

技巧：先平移再旋转

transform：translate() rotate()

!!注意!!:

1.多重转换是复合属性，具有层叠性

2. 以第一种转换形态的坐标轴为准 这也是为什么要先平移再旋转才能达到滚走的效果

缩放

属性：transform: scale(缩放倍数)

           transform: scale(X轴缩放倍数，Y轴缩放倍数)

技巧：通常只为scale设置一个值，表X轴Y轴等比例缩放

           取值大于1表示放大，小于1表示缩小

倾斜

属性：transform: skew()

单位deg 正左负右

渐变

        1. 线性渐变

background-image: linear-gradient(

        渐变方向,

                颜色1 终点位置，

                颜色2 终点位置,

                ...

);

取值：

渐变方向：①to 方位名词 ②角度度数

终点位置：%

        2. 径向渐变

作用：可以给按钮添加高光效果

属性：background-image: radial-gradient (

                半径 at 圆心位置,

                颜色1 终点位置,

                ...

           );        

取值：

半径可以是2条，则为椭圆

圆心位置取值：px、%、方位名词