将浏览器本地存储与JSF2和Primefaces一起使用

您好，这不是一个严格意义上的问题，我想与大家分享我的解决方案，使用JSF2和Primefaces的浏览器本地存储

我发现很少有关于在jsf2和primefaces中使用本地存储的信息，所以分享我的工作似乎很有用

支持bean：

@Component("pocLocalStorageBean")
@Scope(WebApplicationContext.SCOPE_REQUEST)
public class PocLocalStorageBean {

    private static final long serialVersionUID = 1L;

    private String[] selectedCities;
    private List<String> cities;

    @PostConstruct
    public void initialize() {
            List<String> cities = new ArrayList<String>();
            cities.add("Miami");
            cities.add("London");
            cities.add("Paris");
            cities.add("Istanbul");
            cities.add("Berlin");
            cities.add("Barcelona");
            cities.add("Rome");
            cities.add("Brasilia");
            cities.add("Amsterdam");

            setCities(cities);

    }

    //GETTER E SETTER HERE    
}

@组件（“pocLocalStorageBean”）
@作用域（WebApplicationContext.Scope\u请求）
公共类PocLocalStorageBean{
私有静态最终长serialVersionUID=1L；
私有字符串[]所选城市；
私人名单城市；
@施工后
公共无效初始化（）{
List cities=new ArrayList（）；
城市。添加（“迈阿密”）；
城市。添加（“伦敦”）；
城市。添加（“巴黎”）；
城市。添加（“伊斯坦布尔”）；
城市。添加（“柏林”）；
城市。添加（“巴塞罗那”）；
城市。添加（“罗马”）；
城市。添加（“巴西利亚”）；
城市。添加（“阿姆斯特丹”）；
城市（城市）；
}
//我是盖特·塞特
}

xhtml页面：

 <h:form id="yuorFormId" cache="false">

     <p:remoteCommand name="updateUiAfterLoadChoicesFromLocalStorage" update=":yuorFormId:yourSelectManyCheckboxId">
     </p:remoteCommand>
    <p:remoteCommand oncomplete="loadCitiesChoicesFromLocalStorage(#{pocLocalStorageBean.cities.size()});" autoRun="true">
     </p:remoteCommand>

    <div class="ui-g ui-fluid">

      <div class="ui-g-12 ui-md-12">

            <div class="card">

                    <p:selectManyCheckbox id="yourSelectManyCheckboxId" value="#{pocLocalStorageBean.selectedCities}" layout="responsive" columns="3">
                        <f:selectItems value="#{pocLocalStorageBean.cities}" var="city" itemLabel="#{city}" itemValue="#{city}"/>
                        <p:ajax oncomplete="setCitiesChoicesToLocalStorage(#{pocLocalStorageBean.cities.size()})"/>
                    </p:selectManyCheckbox>

                </div>

             </div>
        </div>

    </h:form>

以及javascript函数：

function findPreviousChoose(arrayChoicesFromLocalStorage,valueToFind){
    if(arrayChoicesFromLocalStorage != null && arrayChoicesFromLocalStorage.length > 0){
        var arrayLength = arrayChoicesFromLocalStorage.length;
        for (var j = 0; j < arrayLength; j++) {
            var iteratedChoose = arrayChoicesFromLocalStorage[j];
            if(iteratedChoose!=null){
                if(iteratedChoose.value == valueToFind){
                    return iteratedChoose;
                }
            }
        }
    }
    return null;
}

function parseSafeJSON(str){
    try {
        if(str!=null){
            var obj = JSON.parse(str);
            return obj;
        }
    } catch (ex) {
      return null;
    }
    return null;
}

function loadCitiesChoicesFromLocalStorage(citiesNumber){
    var arrayChoicesFromLocalStorageStringed = localStorage.getItem('CITIES_LOCAL_STORE_KEY');
    if(arrayChoicesFromLocalStorageStringed!=null){

        var arrayChoicesFromLocalStorage = parseSafeJSON(arrayChoicesFromLocalStorageStringed);
        var elementId = 'yuorFormId:yourSelectManyCheckboxId';
        var element = document.getElementById(elementId);

        var i;
        for (i = 0; i < citiesNumber; i++) {
            var elementIterated = document.getElementById(elementId+':'+i);
            var valueIterated = elementIterated.value;
            var previousChoose = findPreviousChoose(arrayChoicesFromLocalStorage,valueIterated);
            if(previousChoose != null) {
                elementIterated.defaultChecked = previousChoose.defaultChecked;
            }
        }

        //update the needed components:
        updateUiAfterLoadChoicesFromLocalStorage();

    }

}

function setCitiesChoicesToLocalStorage(citiesNumber) {

    var elementId = 'yuorFormId:yourSelectManyCheckboxId';
    var element = document.getElementById(elementId);

    var i;

    var arrayChoices = new Array();
    for (i = 0; i < citiesNumber; i++) {
        var elementIterated = document.getElementById(elementId+':'+i);
        var valueIterated = elementIterated.value;
        var defaultCheckedIterated = elementIterated.checked;
        var objIterated = { "value":valueIterated, "defaultChecked":defaultCheckedIterated};
        arrayChoices.push(objIterated);
    }

    var storageValuesArray = JSON.stringify(arrayChoices);
    localStorage.setItem('CITIES_LOCAL_STORE_KEY', storageValuesArray);

}

函数findPreviousChoose（arrayChoicesFromLocalStorage，valueToFind）{
if（arrayChoicesFromLocalStorage！=null&&arrayChoicesFromLocalStorage.length>0）{
var arrayLength=arrayChoicesFromLocalStorage.length；
对于（var j=0；j

我还向primefaces论坛报告了我的解决方案：

如果您不使用primefaces，而只使用JSF2.3，那么它应该使用h:commandScript而不是p:remoteCommand（但我没有尝试）：

对于那些使用jsf<2.3而不使用primefaces的人，我不知道该解决方案（欢迎对此场景提出任何建议）