Web Storage本地储存

Web Storage本地储存

HTML5中,除了CANVAS元素,另外一个新增的非常重要功能就是可以在本地客户端储存数据的WebStorage功能。

HTML4我们是使用的cookies在客户端保存用户名等等一些简单的用户信息

Cookies的缺点:

1)         大小显示在4KB

2)         宽带浪费

3)         难以操作

为了解决这样的一些问题,在HTML5中重新提供了在客户端保存数据的功能,他就是我们“WebStorage”。

1,         sessionStorage临时保存

就是把数据保存在session对象之中。

Session就是打开网站到关闭网站之间要求进行保存的数据。

SessionStorage

临时保存的用法:

SessionStorage.setItem(‘key’,’value’);

//或者是sessionStorage.KEY=’value’;

临时数据读取的方法:

变量=sessionStorage.getItem(‘key’);

//或者是sessionStorage.key

function saveStorage(id){
  var target = document.getElementById(id);
  var str = target.value;
  sessionStorage.setItem(‘mess’,str);
}
Function loadStorage(id){
  var target = document.getElementById(id);
  var msg = sessionStorage.getItem(‘mess’);
  varget.innerHTML = msg;
}

2,         localStorage永久保存

就是将数据保存在客户端本地的硬件设备至上面,如果浏览器被关闭,这个数据不会丢失,下次打开可以继续使用。这个功能就是我们的localStorage永久保存功能。

localStorage

永久保存数据的方法:

localStorage.setItem(‘key’,’value’);

//或者

localstorage.key

读取的方法:

变量=localStorage.getItem(‘key’);

//或者

变量=localStorage.key

function saveStorage(id){
  var target = document.getElementById(id);
  var str = target.value;
  localStorage.setItem(‘mess’,str);
}
Function loadStorage(id){
  var target = document.getElementById(id);
  var msg = localStorage.getItem(‘mess’);
  varget.innerHTML = msg;
}

 



回复列表



回复操作

正在加载验证码......

请先拖动验证码到相应位置