H5存储方式 --- cookie & localStorage & sessionStorage & Web SQL Database

时间:2019-10-31
本文章向大家介绍H5存储方式 --- cookie & localStorage & sessionStorage & Web SQL Database,主要包括H5存储方式 --- cookie & localStorage & sessionStorage & Web SQL Database使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

首先,亲测手动清除浏览器缓存可以清除localStorage、sessionStorage和cookie。

不同浏览器无法共享localStorage和sessionStorage中的信息。同一浏览器的相同域名和端口的不同页面间可以共享相同的 localStorage,但是不同页面间无法共享sessionStorage的信息。这里需要注意的是,页面仅指顶级窗口,如果一个页面包含多个iframe且他们属于同源页面,那么他们之间是可以共享sessionStorage的。

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