前端学习(二十七)存储&es6(笔记)
cookie 存储
以站点为单位的。
必须配合服务器环境
不能跨浏览器
cookie有生命周期 默认是session
session 会话
打开页面会话开始
关闭浏览器会话结束
名字不能重复
容量有限: 4KB
如何存数据?
document.cookie = 'name=value';
document.cookie = 'name=value; PATH=/';
document.cookie = 'name=value; PATH=/; EXPIRES='+oDate;
如何取数据?
document.cookie
如何删除数据?
把过期时间设置到以前
什么时候使用?
如何使用?
拖拽
存
鼠标抬起存
取
页面加载取
选项卡
存
切换之后存
取
页面加载取
记住用户名
存
登录时存
取
页面加载取
日期时间
高级浏览器
Wed May 10 2017 10:55:51 GMT+0800 (中国标准时间)
低版本ie
Wed May 10 10:57:01 UTC+0800 2017
oDate.toGMTString()
或者
oDate.toUTCString()
====================================================
localStorage 本地存储
cookie localStorage
大小 4KB 5MB
操作 麻烦 简单
过期 有默认是session 没有过期时间
复杂 很多属性 key , value
本地化 不是 是
==================================================
window.localStorage
存
localStorage.名字 = 值;
取
localStorage.名字;
删
delete localStorage.名字;
========================================================
localStorage存入的所有的东西都变成了字符串
存入
[1,2,3,4,5]
变成
'1,2,3,4,5'
存入
{"a":12,"b":5}
变成
'[object Object]'
序列化、持久化
对象-》字符串
var str = JSON.stringify(obj)
eg:
var str = JSON.stringify([1,2,3,4]);
'[1,2,3,4]'
eg2:
var json = {"name":"lucy","age":12};
var str = JSON.stringify(json);
'{"name":"lucy","age":12}'
反序列化、反持久化
字符串-》对象
var obj = JSON.parse(str);
'{"name":"lucy","age":12}'
{"name":"lucy","age":12}
'[1,2,3,4]'
[1,2,3,4]
存的时候:序列化
JSON.stringify(obj);
取的时候:反序列化
JSON.parse(str)
-----------------------------------------------------
可以模拟多窗口通信
window.onstorage
当localStorage的值改变的时候触发
window.onstorage = function(ev){
ev.key 被改的名字
localStorage[ev.key] 被改的值
};
===========================================================
localStorage的兄弟
sessionStorage
跟localStorage 一模一样,任何操作都一模一样
唯一一点区别就是sessionStorage有过期时间
过期时间:session,关闭浏览器的时候
====================================================
ES6 ECMAScript 6 ECMAScript.next
ES标准
JavaScript
TypeScript 微软出的
AngularJS从2.0开始
ActionScript Flash
历史
ES1.0
ES2.0
ES3.0
ES4.0 干掉了。
ES3.1 4.0的阉割版 harmony
ES5.0
ES6.0
ES5.0和ES6.0沦为后台
NodeJS
=======================================================
声明变量
let 名字 = 值;
块级作用域
{
}
不允许重复声明
声明常量
不能改变
一经声明,就不能改变了。
const 名字 = 值;
不允许重复的声明
必须声明的时候直接给值
const a; a = 5 不允许
----------------------------------------------------------
字符串拼接
var name = '张三';
var age = 18;
var str = '我叫"'+name+'",今年"'+age+'"岁';
新写法
var str = `我叫"${name}",今年"${age}"岁`;
----------------------------------------------------------
解构赋值
let [a,b] = [12,5];
let [a,[b,c],d] = [12,[5,3],8];
var {a,b} = {a:12,b:5};
let left = 0;
let top = 0;
var json = {
left:left,
top:top
}
等
var json = {
left,
top
}
function changeColor(obj,color='black'){
相当于
color = color||'black'';
}
---------------------------------------------------------
扩展运算符
var arr = [1,2,3]
var arr2 = [...arr];
只能玩数组
function sum(...args){
args 相当于 arguments
}
-----------------------------------------------------------
function show(a){
var json = {b:5};
delete json.b;
alert(json.b); undefined
delete a;
alert(a); 12
}
alert(show(12)); undefined
前端学习(二十七)存储&es6(笔记)的更多相关文章
- 前端学习(二)css样式笔记(笔记)
background-image:url(img/xiaofeiji.jpg)背景图:url(图片路径):(背景图默认平铺) background-repeat:repeat-x/repeat-y/n ...
- 前端学习(十七):JavaScript常用对象
进击のpython ***** 前端学习--JavaScript常用对象 JavaScript中的所有事物都是对象:字符串.数字.数组.日期,等等 在JavaScript中,对象是拥有属性和方法的数据 ...
- Java开发学习(二十七)----SpringMVC之Rest风格解析及快速开发
一.REST简介 REST(Representational State Transfer),表现形式状态转换,它是一种软件架构风格 当我们想表示一个网络资源的时候,可以使用两种方式: 传统风格资源描 ...
- 前端学习(二十八)es6&ajax(笔记)
ES6 let 块级作用域 const 解构赋值 字符串拼接 扩展运算符 ------------------------------------------ ...
- 前端学习(三十七)angular(笔记)
MVC 后台 M Module 数据层 V View 视图层 C Contro ...
- 前端学习(二十九)nodejs(笔记)
后台语言 java php .Net python Node.js------------------------------------------------- ...
- 前端学习(二十三)DOM操作,事件(笔记)
javascript 组成部分 1.ECMAScript javascript的核心解释器 2.DOM Document Object Modle 文 ...
- 前端学习(三十)es6的一些问题(笔记)
赋值表达式 document.onclick = document.onmouseover = fn; var a = b = c = d = 5; 不推荐 逗号表 ...
- 前端学习(二十六)移动端s(笔记)
===================================================弹性布局rem布局---------------------------------------- ...
随机推荐
- win10搭建ftp环境
1.进入程序,并点击“启用或关闭windows功能” 2.勾选对应的功能,并点击“确定” 3.进入IIS 4.如下图 5.如图 6.如图 7.如下图 8.创建新用户,用于登录ftp(自行创建) 9.禁 ...
- This MySqlConnection is already in use
项目中类似于以下的代码,实际的代码要更复杂,DbContext是依赖注入的: 报错如下: This MySqlConnection is already in use. See https://fl. ...
- Sublime Text 注册及使用相关
sublime text3 注册码 2019-07-01 注册码可以直接用 地址: 2019-07-01 亲测可用 2019-07-18 亲测可用 -– BEGIN LICENSE -– Die So ...
- 支付宝证书签名 PHP SDK
PHP 接入支付宝证书方式签名以及验签 支付宝在 2019.10.25 日左右更新了新的 PHP SDK (v4.1.0). 之前的 PHP SDK(v3.4.2) 仅支持公钥方式加签.这次更新之后 ...
- 直击KubeCon 2018 |云原生正在改变你的衣食住行
云计算从不被看好到成长为势不可挡的技术潮流,仅仅用了十年的时间.如今“云原生”又被企业以及开发者奉为圭臬,并被认为是云计算的未来. 阿里云容器技术负责人易立认为云计算有三个阶段:云搬迁.云就绪和云原生 ...
- php rtrim()函数 语法
php rtrim()函数 语法 rtrim()函数怎么用? php rtrim()函数用于删除字符串右边的空格或其他预定义字符,语法是rtrim(string,charlist),返回经过charl ...
- 从Java future 到 Guava ListenableFuture实现异步调用
从Java future 到 Guava ListenableFuture实现异步调用 置顶 2016年04月24日 09:11:14 皮斯特劳沃 阅读数:17570 标签: java异步调用线程非阻 ...
- Jmeter断言中判断请求失败的响应代码问题
很多http请求会返回400.404.500.502等错误,我们在断言中一般会直接去勾选响应代码,然后匹配得到的响应代码,但是总是失败.百思不得其解! 后来查询Jmeter官方帮助时,在里面找到了答案 ...
- Linux下实现MySQL数据库每天定时自动备份
使用MySQL自带的备份工具+ crontab 的方式来实现备份 1.查看磁盘挂载信息(选一个容量合适的) #df -h 2.创建备份目录 为了方便,在/home保存备份文件: cd /home/ga ...
- 利用float与overflow:hidden实现移动端两栏自适应布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...