H5存储方式 --- cookie & localStorage & sessionStorage & Web SQL Database
首先,亲测手动清除浏览器缓存可以清除localStorage、sessionStorage和cookie。
localStorage是通过浏览器存储到本机机器上的磁盘中,生成.localstorage文件但其实是sqlit数据库文件。域内安全、永久保存,没有时间限制,即客户端或浏览器中来自同一域名的所有页面都可访问localStorage数据且数据除了删除否则永久保存,但浏览器之间的数据事相互独立的;
sessionStorage不是用来存储在客户端,而是存储在整个会话当中,即浏览器访问服务器这个过程,关闭当前浏览器窗口或停止服务器即断开会话,存储的数据会被删除。
localStorage和sessionStorage都具有相同的操作方法:setItem、getItem、removeItem、clear。
setItem 存储 value
.setItem( key, value) 将value存储到key字段。
localStorage.setItem("job", "basketballplayer");
setItem 存储 json对象
localStorage 和 sessionStorage也可存储Json对象,存储时,通过JSON.stringify()将对象转换为文本格式;读取时,通过JSON.parse()将文本转换回对象。
var user = { name:"james", job:"basketballplayer" } // 存储值:将对象转换为Json字符串 localStorage.setItem('user', JSON.stringify(user)); // 取值时:把获取到的Json字符串转换回对象 var userJsonStr = localStorage.getItem('user'); var userEntity = JSON.parse(userJsonStr); console.log(userEntity.name); // => james
getItem获取value
.getItem(key) 获取指定key本地存储的值。
localStorage.getItem("job");
removeItem删除key
.removeItem(key)删除指定key本地存储的值。
localStorage.removeItem("job");
clear清除所有的key/value
.clear() 清除所有的key/value
localStorage.clear();
cookie(存储4k)
。。。。。。。
跨域问题
所谓浏览器的同源策略是指,协议,域名,端口相同。当一个浏览器的两个tab页中分别打开百度和谷歌的页面。浏览器的百度tab页执行脚本的时候会检查这个脚本是属于哪个页面的,即检查是否和当前页面地址同源,只有和百度同源的脚本才会被执行。 如果非同源,那么在请求数据时,浏览器会在控制台中报一个异常,提示拒绝访问。
浏览器是以HTTP请求模式获取请求资源,如:Http://www.baidu.com:8080/xxxx。其中HTTP是请求协议,www.baidu.com是域名,8080是端口号,请求的意思是使用HTTP协议模式,从域名为www.baidu.com的服务器上8080端口部署的服务下请求资源XXXX。
即当浏览器打开的tab满足同源策略后,可以在各个文件之间进行数据的相互存取操作,这样就可以不用反复进行重复的数据请求操作,如登录权限,获取用户信息等等。
localStorage和cookie不能跨域读取的(包括子域)
localStorage和cookie需要跨域的业务场景
www.baidu域名下面登录了,发现yun.baidu域名下面也自然而然登录了;淘宝登录了,发现天猫也登录了,淘宝和天猫是完全不一样的2个域名。
localStorage的跨域解决方案
如果两个页面的主域名相同,将document.domain属性值设置为根域名:
document.domain = 'a.com';
域名完全不相同的话,可以用postMessage和iframe相结合的方法。postMessage(data,origin)方法允许来自不同源的脚本采用异步方式进行通信:
data:要传递的数据,H5规范中提到该参数可以是Javascript的任意基本类型或可复制的对象,然而并不是所有浏览器支持任意类型的参数,部分浏览器只能处理字符串参数,所以在传递参数时需要使用JSON.stringify()方法对对象参数序列化。
origin:字符串类型的参数,指明目标窗口的源,协议+主机+端口号[+URL],URL会被忽略,所以可以不写。只是为了安全考虑,postMessage()方法只会将message传递给指定窗口,当然也可以将参数设置为"*",这样可以传递给任意窗口,如果要指定和当前窗口同源的话设置为"/"。
a.com下页面通过iframe插入了b.com下的一个页面,a.com下页面代码如下,以下代码可以向b.com域下的页面发送数据:
var iframeWin = document.getElementsByTagName('iframe')[0].contentWindow; var obj = { name: 'a' }; iframeWin.postMessage(JSON.stringify({ key: "localstorage", data: obj }), "http://b.com");
b.com下页面代码如下,以下代码可以接收http://a.com域下页面发送的数据:
window.onmessage = function(event) { if (event.origin !== 'http://b.com') { return; } var payload = JSON.parse(event.data); localStorage.setItem(payload.key, JSON.stringify(payload.data)); };
cookie的跨域解决方案
cookie 一般都是由于用户访问页面而被创建的,可是并不是只有在创建 cookie 的页面才可以访问这个cookie。在默认情况下,出于安全方面的考虑,只有与创建 cookie 的页面处于同一个目录或在创建cookie页面的子目录下的网页才可以访问。那么此时如果希望其父级或者整个网页都能够使用cookie,就需要进行path(路径)的设置。
path表示cookie所在的目录, 如:
cookie1的path为/tag/;
cookie2的path为/tag/id/;
那么tag下的所有页面都可以访问到cookie1,而只有/tag/id/下的子页面能访问cookie2。 这是因为cookie2能让其path路径下的页面访问。
使用domain
domain表示的是cookie所在的域,默认是页面的地址,如网址为 http://www.haorooms.com/post/long_lianjie_websocket ,那么domain默认为www.haorooms.com。
如域A为love.haorooms.com,域B为resource.haorooms.com,那么在域A生产一个令域A和域B都能访问的cookie就要将该cookie的domain设置为.haorooms.com;
使用jsonp
使用nginx反向代理
Web SQL
........
原文:https://www.cnblogs.com/wlzdf999/p/9359142.html
https://blog.csdn.net/liuchao_sun/article/details/79634162
https://www.jianshu.com/p/e86d92aeae69
https://www.haorooms.com/post/kuayu_localstorage_cookie
https://blog.csdn.net/qq_41480099/article/details/80237636
原文地址:https://www.cnblogs.com/xjy20170907/p/11772416.html
- Flash/Flex学习笔记(21):利用colorTransform改变对象的颜色及透明度
- 网站访问状态和超时时间监控报警设置
- 为treeview添加客户端事件
- Flash/Flex学习笔记(20):贝塞尔曲线
- 磁盘挂载问题:Fdisk最大只能创建2T分区的盘,超过2T使用parted
- asp.net中几种页面元素的比较
- Flash/Flex学习笔记(19):颜色合成与分解的基本原理
- Flash/Flex学习笔记(18):画线及三角函数的基本使用
- Mapx自带的工具的理解
- 水晶报表的推模式
- Flash/Flex学习笔记(17):按键捕获
- 温故而知新:c#中的特性(attribute)
- 温故而知新:new与override的差异以及virtual方法与abstract方法的区别
- malloc函数及用法
- MySQL 教程
- MySQL 安装
- MySQL 管理与配置
- MySQL PHP 语法
- MySQL 连接
- MySQL 创建数据库
- MySQL 删除数据库
- MySQL 选择数据库
- MySQL 数据类型
- MySQL 创建数据表
- MySQL 删除数据表
- MySQL 插入数据
- MySQL 查询数据
- MySQL where 子句
- MySQL UPDATE 查询
- MySQL DELETE 语句
- MySQL LIKE 子句
- mysql order by
- Mysql Join的使用
- MySQL NULL 值处理
- MySQL 正则表达式
- MySQL 事务
- MySQL ALTER命令
- MySQL 索引
- MySQL 临时表
- MySQL 复制表
- 查看MySQL 元数据
- MySQL 序列 AUTO_INCREMENT
- MySQL 处理重复数据
- MySQL 及 SQL 注入
- MySQL 导出数据
- MySQL 导入数据
- MYSQL 函数大全
- MySQL Group By 实例讲解
- MySQL Max()函数实例讲解
- mysql count函数实例
- MYSQL UNION和UNION ALL实例
- MySQL IN 用法
- MySQL between and 实例讲解
- 干货 | Elasticsearch 开发实战常用命令清单
- Scrapy框架: 登录网站
- Scrapy框架: middlewares.py设置
- Scrapy框架: pipelines.py设置
- Scrapy框架: 通用爬虫之CrawlSpider
- Scrapy框架: 通用爬虫之XMLFeedSpider
- Scrapy框架: 通用爬虫之CSVFeedSpider
- Scrapy框架: 通用爬虫之SitemapSpider
- Scrapy框架: 异常错误处理
- Scrapy框架: Request回调函数
- Python快速设置Excel表格边框
- SwiftUI:contextMenu 菜单
- [已解决]报错: Could not install packages due to an EnvironmentError: [Errno 13] Permission denied: '/User
- Python建立pip.ini
- 使用requests_html抓取数据